创建动态项目列表并按用户订阅显示项目

Question

我正在寻找创建2列的动态项目列表，但是该列表项目将按照用户订阅级别显示，其他未订阅的项目将被隐藏。

例如-我名单上有10个团队

项目清单

 <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> 

情况1-如果用户仅从索引0订阅了9个项目，而没有订阅索引1，则该列表应如下所示，未订阅者将被隐藏。 （项目列表将前移一个索引）

COL B5被隐藏

方案2-如果用户仅从索引0订阅了5个项目，则列表应如下所示，未订阅的用户将被隐藏。

隐藏了COL B3至COL B5

我对HTML，CSS，JavaScript / jQuery有点熟悉。 我知道有大量的在线创建数据资源，但是，我认为我找不到想要的东西。

如果有人在JavaScript / jQuery中有解决此问题的任何方法，那将非常有帮助。

Answer 1

除非您真的想使用表，否则还有另一种方法。 （这只会部分回答问题，因为我不是在爱尔兰时间凌晨2点写JavaScript的。）

请参阅下面的代码片段。通过创建具有两列的列表，可以创建列表，然后通过使用“ hidden”类将可见性设置为hidden来隐藏元素。 我制作了“桌子”，每边有6行，然后将第一行隐藏起来，否则背景颜色会不均匀/不均匀。 隐藏列表项时，它不会影响背景色的布局，只是不要使用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> 

这应该可以帮助您入门！ 这里是一个小提琴的片段与隐藏的元素