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>

我需要一个int count变量或boolean odd / even变量来跟踪行。然后我的<tr>标记看起来像：

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

Answer 1

使用varStatus标记上的forEach属性，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 primer提供了有关core标记库及其为您提供的内容的更多信息。

Answer 2

如果您愿意在客户端实现这一目标，可以使用JQuery进行Zebra Striping。

只需几行代码即可完成，但您必须在文件中包含jquery库。

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

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

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

Answer 3

（这个答案仅适用于CSS方面......）

当然，我总是像孩子一样瞄准孩子：

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}

所以你的代码略显冗长

Answer 4

就这样做并开始工作：

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

Answer 5

我不使用JSP，所以我不能用你的语言给你答案，但这就是我所做的（使用伪代码）

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

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

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>

如何使用JSP替换HTML表行颜色？

6 个答案: