如何使用JSP交替改变HTML表格行的颜色？

Question

如何使用JSP交替显示HTML表格行颜色？

我的CSS大致如下：

tr.odd {background-color: #EEDDEE}
tr.even {background-color: #EEEEDD}

我想使用 <c:forEach> 遍历一个集合。

<c:forEach items="${element}" var="myCollection">
  <tr>
    <td><c:out value="${element.field}"/></td>
    ...
  </tr>
</c:forEach>

我需要一个整数型的计数变量或布尔类型的奇偶变量来追踪行。那么我的<tr>标签会看起来像这样:

<tr class="odd or even depending on the row">

- Steve Kuo

Answer 1

使用 forEach 标签上的 varStatus 属性，JSTL 将会在你指定的变量名中管理一个 javax.servlet.jsp.jstl.core.LoopTagStatus 实例。

然后，您可以使用三元运算符轻松输出相应的类名：

<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
    ...
  </tr>
</c:forEach>

这篇来自IBM的JSTL入门指南提供了更多关于core标签库的信息，以及它能为您带来什么。

- insin

Answer 2

只需要按照以下步骤操作，就能正常工作：

table tr:nth-child(odd) { background-color: #ccc; }

- Cifi

---

注意：仅适用于支持CSS3的浏览器（因此不适用于IE8及更早版本）。 - BalusC

2019年更好的解决方案。 - wonsuc

Answer 3

（本答案仅涉及CSS方面...）

通常情况下，我总是这样针对子级TD：

tr.odd td {}
tr.even td {}

原因是IE实际上通过删除TR上设置的值并将其应用于该TR中的每个单独的TD来应用TR背景颜色。有时您可能会有一个CSS重置或其他CSS规则，这些规则会覆盖IE奇怪的TR背景颜色设置方式，所以这是一种确保避免这种情况的方法。

此外，您可能希望仅设置

tr td {background-color: #EEDDEE}

并且

tr.odd td {background-color: #EEEEDD}

所以你的代码稍微简洁一些。

- Andy Ford

Answer 4

如果您愿意在客户端实现这个功能，您可以使用JQuery来进行斑马线条纹的处理。

只需要几行代码就可以完成，但您需要在文件中包含jquery库。

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

http://docs.jquery.com/Selectors/odd

http://docs.jquery.com/Selectors/even

- Eli

Answer 5

我不使用JSP，所以无法用你的语言回答你，但是这是我做的（使用伪代码）

counter = 0
foreach (elements)
    counter = counter + 1
    output: <tr class="row{counter % 2}">...</tr>

个人而言，我会将类命名为“row0”和“row1”，这样您就可以通过简单的模数计算在它们之间进行交替。此外，如果您决定让行以三元组或四元组交替（而不是成对），您可以轻松扩展到row2、row3等，并将输出代码更改为counter % 4等。

- nickf

---

我真的在寻找如何声明计数器变量而不使用<% %>标签的JSP语法。 - Steve Kuo

Answer 6

我在类似这样的情况下使用了三元运算符。它看起来会像这样：

String oddEven="";
<c:forEach items="${element}" var="myCollection">
    oddEven = (oddEven == "even") ? "odd" : "even";
    <tr class='"'+oddEven+'"'>
        <td><c:out value="${element.field}"/></td>
        ...
    </tr>
</c:forEach>

- Eirik