题
如何使用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">
解决方案
使用 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入门提供了有关<的更多信息代码>核心标记库及其为您提供的内容。
其他提示
如果您愿意在客户端实现这一目标,可以使用JQuery进行Zebra Striping。
只需几行代码即可完成,但您必须在文件中包含jquery库。
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
(这个答案仅适用于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}
所以你的代码略显冗长
就这样做并开始工作:
table tr:nth-child(odd) { background-color: #ccc; }
我不使用JSP,所以我不能用你的语言给你答案,但这就是我所做的(使用伪代码)
counter = 0
foreach (elements)
counter = counter + 1
output: <tr class="row{counter % 2}">...</tr>
就个人而言,我将类命名为“row0”。和“row1”,它允许您通过简单的模数计算在它们之间交替,如果您决定以三元组或四元组(而不是对)交替行,您可以轻松地将其扩展为 row2
, row3
并将输出代码更改为 counter%4
等。
在这种情况下,我使用了三元运算符。它看起来像是:
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>