仅显示偶数项的表格的替代行颜色

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 表达式中使用条件运算符 ?: 设置 类名来完成。

因此，应该执行以下操作：

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

请注意，我用简单的 替换了笨拙的 。 code> 并修复了其不合逻辑的位置（您最初的尝试将呈现无效的空 元素）。