創建動態項目列表並按用戶訂閱顯示項目

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> 

這應該可以幫助您入門！ 這里是一個小提琴的片段與隱藏的元素