Creating a dynamic item list and display the the item as per user subscription

Question

I'm looking to create a dynamic item list of 2 column, but the list item will display as per the user subscription level and other not subscribed items will be hidden.

For example- I have 10 teams on the list

Item List

 <table width="640" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" valign="top" style="font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight: 600; font-size:15px; color:#003057; mso-line-height-rule:exactly; line-height:18px; padding:0px 0 0px 0;">Your TV Choice lineup</td> </tr> <tr> <td align="left" valign="top" height="15" style="line-height:15px;" ><img src="http://epidm.edgesuite.net/CMS/Coding/Charter/TEMPLATES/CONTENT_ELEMENTS/images/spacer.gif" alt="" width="1" height="15" style="display: block" border="0" /></td> </tr> <tr> <td align="center" valign="middle"> <table width="600" cellspacing="0" cellpadding="0" border="0"> <!-- start if/then statement --> <tr> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#f5f5f7" height="25"> [COL A1] </td> <!-- end if/then statement --> <td align="center" valign="middle" width="20" bgcolor="#ffffff"> <img src="http://epidm.edgesuite.net/CMS/Coding/Charter/TEMPLATES/CONTENT_ELEMENTS/images/spacer.gif" alt="" width="20" height="1" style="display: block" border="0" /> </td> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#f5f5f7" height="25"> [COL B1] </td> <!-- end if/then statement --> </tr> <!-- end if/then statement --> </table> </td> </tr> <tr> <td align="center" valign="middle"> <table width="600" cellspacing="0" cellpadding="0" border="0"> <!-- start if/then statement --> <tr> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#ffffff" height="25"> [COL A2] </td> <!-- end if/then statement --> <td align="center" valign="middle" width="20" bgcolor="#ffffff"> <img src="http://epidm.edgesuite.net/CMS/Coding/Charter/TEMPLATES/CONTENT_ELEMENTS/images/spacer.gif" alt="" width="20" height="1" style="display: block" border="0" /> </td> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#ffffff" height="25"> [COL B2] </td> <!-- end if/then statement --> </tr> <!-- end if/then statement --> </table> </td> </tr> <tr> <td align="center" valign="middle"> <table width="600" cellspacing="0" cellpadding="0" border="0"> <!-- start if/then statement --> <tr> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#f5f5f7" height="25"> [COL A3] </td> <!-- end if/then statement --> <td align="center" valign="middle" width="20" bgcolor="#ffffff"> <img src="http://epidm.edgesuite.net/CMS/Coding/Charter/TEMPLATES/CONTENT_ELEMENTS/images/spacer.gif" alt="" width="20" height="1" style="display: block" border="0" /> </td> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#f5f5f7" height="25"> [COL B3] </td> <!-- end if/then statement --> </tr> <!-- end if/then statement --> </table> </td> </tr> <tr> <td align="center" valign="middle"> <table width="600" cellspacing="0" cellpadding="0" border="0"> <!-- start if/then statement --> <tr> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#ffffff" height="25"> [COL A4] </td> <!-- end if/then statement --> <td align="center" valign="middle" width="20" bgcolor="#ffffff"> <img src="http://epidm.edgesuite.net/CMS/Coding/Charter/TEMPLATES/CONTENT_ELEMENTS/images/spacer.gif" alt="" width="20" height="1" style="display: block" border="0" /> </td> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#ffffff" height="25"> [COL B4] </td> <!-- end if/then statement --> </tr> <!-- end if/then statement --> </table> </td> </tr> <tr> <td align="center" valign="middle"> <table width="600" cellspacing="0" cellpadding="0" border="0"> <!-- start if/then statement --> <tr> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#f5f5f7" height="25"> [COL A5] </td> <!-- end if/then statement --> <td align="center" valign="middle" width="20" bgcolor="#ffffff"> <img src="http://epidm.edgesuite.net/CMS/Coding/Charter/TEMPLATES/CONTENT_ELEMENTS/images/spacer.gif" alt="" width="20" height="1" style="display: block" border="0" /> </td> <!-- start if/then statement --> <td align="center" valign="middle" width="290" bgcolor="#f5f5f7" height="25"> [COL B5] </td> <!-- end if/then statement --> </tr> <!-- end if/then statement --> </table> </td> </tr> </table> 

Scenario 1- If a user is only subscribed to 9 item from the index 0, and index 1 is not subscribed, so the list should be like below, and the not subscribes one will be hidden. (Item list will be shift one previous index)

COL B5 was hidden

Scenario 2 - If a user is only subscribed to 5 item from the index 0, so the list should be like below, and the not subscribes one will be hidden.

COL B3 to COL B5 was hidden

I am somewhat familiar with HTML, CSS, JavaScript/jQuery. I understand that there is a big resource of data for creating online, however, I don't think I found what I was looking for.

If anyone has any solution to this problem in JavaScript/jQuery, that's would be so helpful.

Answer 1

Unless you really want to use a table, there is an alternative way of doing this. (this will only partly answer the question as I'm not writing javascript at 2am Irish time)..

See the snippet below.. by creating a list with two columns, you can can create a list and then hide elements by setting the visibility to hidden using a "hidden" class. I made the "table" to have 6 rows a side, and then hid the first row to start off, otherwise the background-colour would have been off/uneven. When you hide a list item, it will not affect the layout of the background-colour, just don't use display:none;

 #choices { text-align: center; width: 640px; font-family: "Open Sans", Arial, Helvetica; line-height: 1.5; } ul { margin-top: -20px; list-style-type: none; column-count: 2; text-transform: uppercase; } .hidden { visibility: hidden; } li:nth-child(2n) { background-color: #f5f5f7; } 

 <div id="choices"> <h3> Your TV choices </h3> <ul> <li class="hidden">col a1</li> <li>col a1</li> <li>col a2</li> <li>col a3</li> <li>col a4</li> <li>col a5</li> <li class="hidden">col a1</li> <li>col b1</li> <li>col b2</li> <li>col b3</li> <li>col b4</li> <li>col b5</li> </ul> </div> 

This should get you started hopefully! Here is a fiddle of the snippet with an element hidden