僅顯示偶數項目的表格的備用行顏色

Question

我正在使用JSTL並將數據並排顯示在兩個表格中。爲此，我正在檢查偶數和奇數，並在一張表中甚至另一張表中顯示奇數列表。

現在對於有記錄的表格，我想爲白色和黑色的交替行着色。你能讓我知道我該怎麼做嗎？

我試過JavaScript以獲取表的ID，然後指定顏色，但它不工作。

<table width="100%" border="0" cellspacing="0" cellpadding="5"> 
    <tr> 
     <td width="50%"> 
      <!-- Table on left side --> 
      <table id="tabbed" width="100%" border="1" cellspacing="0" cellpadding="1"> 
       <thead> 
        <tr> 
         <th>Id</th> 
         <th>Name</th> 
         <th>Description</th> 
         <th>Disp Ind</th> 
        </tr> 
       </thead> 
       <c:forEach items="${dynaItemGroupDetailListForm.map.itemsList}" var="item" varStatus="rowstatus"> 
        <tr> 
         <c:choose> 
          <c:when test="${rowstatus.count % 2 == 1}"> 
           <td><c:out value="${item.itemRefId}" /></td> 
           <td><c:out value="${item.itemNm}" /></td> 
           <td><c:out value="${item.itemDesc}" /></td> 
           <td><c:out value="${item.itemDisplayInd}" /></td> 
          </c:when> 
         </c:choose> 
        </tr> 
       </c:forEach> 
      </table> 
     </td> 
     <td width="50%"> 
      <!-- Table on right side --> 
      <table width="100%" border="1" cellspacing="0" cellpadding="1"> 
       <tr class="even"> 
        <th>Id</th> 
        <th>Name</th> 
        <th>Description</th> 
        <th>Disp Ind</th> 
       </tr> 
       <c:forEach items="${dynaItemGroupDetailListForm.map.itemsList}" var="item" varStatus="rowstatus"> 
        <tr> 
         <c:choose> 
          <c:when test="${rowstatus.count % 2 == 0}"> 
           <td><c:out value="${item.itemRefId}" /></td> 
           <td><c:out value="${item.itemNm}" /></td> 
           <td><c:out value="${item.itemDesc}" /></td> 
           <td><c:out value="${item.itemDisplayInd}" /></td> 
          </c:when> 
         </c:choose> 
        </tr> 
       </c:forEach> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

現在對於這甚至已經記錄的表，我要的顏色交替排白色和黑色。

所以，這表（第二個表，這是在右側）包含行2，4，6，8，10，12等，並要着色2，6，10等白色和4,8,12等黑色。

換句話說，如果count % 4 == 0，那麼它應該是黑色的，否則它應該是白色的。這最好通過在EL擴展中將<tr class>類名與條件運算符?:一起來完成。

因此，下面應該做的：

<c:forEach items="${dynaItemGroupDetailListForm.map.itemsList}" var="item" varStatus="rowstatus"> 
    <c:if test="${rowstatus.count % 2 == 0}"> 
     <tr class="${rowstatus.count % 4 == 0 ? 'table2even' : 'table2odd'}"> 
      <td><c:out value="${item.itemRefId}" /></td> 
      <td><c:out value="${item.itemNm}" /></td> 
      <td><c:out value="${item.itemDesc}" /></td> 
      <td><c:out value="${item.itemDisplayInd}" /></td> 
     </tr> 
    </c:if> 
</c:forEach> 

這個CSS：

.table2odd { 
    background: white; 
} 

.table2even { 
    background: black; 
} 

請注意，我用一個簡單的<c:if>取代笨拙<c:choose><c:when>並固定其不合邏輯的地方，以及（你原來的嘗試將呈現空的<tr>元素是無效的）。