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>

这应该可以帮助您入门！这是该片段的fiddle，其中元素被隐藏

创建动态商品列表并按用户订阅显示商品

1 个答案: