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 experssion中使用条件运算符<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:choose><c:when>替换了笨拙的<c:if>并修复了它不合逻辑的地方（原始尝试会渲染无效的空<tr>元素。

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

1 个答案: