如何使用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> 

我需要一个int count变量或布尔奇数/偶数变量来跟踪行。然后我<tr>标签会看起来像：

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

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> 

这JSTL primer从IBM有大约core标签库以及它给你更多的信息。

Answer 2

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

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

就我个人而言，我将类“row0”和“row1”命名为“row0”和“row1”，它们允许您通过简单的模数计算在它们之间进行切换，而且，如果决定让行以三元组或四元组交替（而非成对）轻松将其扩展为row2,row3并将您的输出代码更改为counter % 4等。

Answer 3

我在这种情况下使用了第三级操作符。它看起来是这样的：

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> 

Answer 4

如果你愿意在客户端做到这一点，你可以用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 5

（这个答案只适用于物联网的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} 

所以你的代码稍微更简洁

Answer 6

只要做到这样，并去上班：

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