如何使用 JSP 交替 HTML 表格行颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/241897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to alternate HTML table row colors using JSP?
提问by Steve Kuo
How do I alternate HTML table row colors using JSP?
如何使用 JSP 交替 HTML 表格行颜色？
My CSS looks something like:
我的 CSS 看起来像：
tr.odd {background-color: #EEDDEE}
tr.even {background-color: #EEEEDD}
I want to use <c:forEach>to iterate over a collection.
我想用来<c:forEach>迭代一个集合。
<c:forEach items="${element}" var="myCollection">
<tr>
<td><c:out value="${element.field}"/></td>
...
</tr>
</c:forEach>
I need an int count variable or boolean odd/even variable to track the row. Then my <tr>tag would look something like:
我需要一个 int count 变量或 boolean 奇数/偶数变量来跟踪行。然后我的<tr>标签看起来像：
<tr class="odd or even depending on the row">
回答by Jonny Buchanan
Use the varStatusattribute on your forEachtag and JSTL will manage an instance of a javax.servlet.jsp.jstl.core.LoopTagStatusfor you in the variable name you specify.
使用标签varStatus上的属性forEach，JSTL 将javax.servlet.jsp.jstl.core.LoopTagStatus在您指定的变量名中为您管理 a 的实例。
You can then use a ternary operator to easily output the appropriate class name:
然后，您可以使用三元运算符轻松输出适当的类名：
<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
<tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
...
</tr>
</c:forEach>
This JSTL primerfrom IBM has more information about the coretag library and what it gives you.
这个来自 IBM 的JSTL 入门有更多关于core标记库及其为您提供的信息。
回答by Cifi
Just do like this and is going to work:
就这样做，并且将工作：
table tr:nth-child(odd) { background-color: #ccc; }
回答by Eli
If you are willing to make this happen on the client side, you can do Zebra Striping with JQuery.
如果您愿意在客户端实现这一点，您可以使用 JQuery 进行 Zebra Striping。
It would be done with just a couple lines of code, but you would have to include the jquery library in your file.
只需几行代码即可完成，但您必须在文件中包含 jquery 库。
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
http://docs.jquery.com/Selectors/odd
http://docs.jquery.com/Selectors/odd
回答by Andy Ford
(this answer only pertains to the CSS side of things...)
（此答案仅与 CSS 方面有关...）
As a matter of course, I always target the child TD's like so:
当然，我总是像这样针对孩子的TD：
tr.odd td {}
tr.even td {}
The reason being is that IE actually applies TR background-color by removing the value set on the TR and applying it to each individual TD within that TR. Sometimes you might have a css reset or other css rules that overrides IE's strange way of doing TR background-color, so this is a way to make sure you avoid that.
原因是 IE 实际上通过删除 TR 上设置的值并将其应用于该 TR 内的每个单独 TD 来应用 TR 背景颜色。有时您可能有一个 css 重置或其他 css 规则，这些规则覆盖了 IE 处理 TR 背景颜色的奇怪方式，所以这是一种确保您避免这种情况的方法。
Also, you might want to consider setting just
此外，您可能需要考虑仅设置
tr td {background-color: #EEDDEE}
and
和
tr.odd td {background-color: #EEEEDD}
so your code is slightly less verbose
所以你的代码稍微不那么冗长
回答by nickf
I don't use JSP, so I can't give you an answer in your language, but here's what I do (using pseudo code)
我不使用 JSP，所以我不能用你的语言给你答案，但这是我所做的（使用伪代码）
counter = 0
foreach (elements)
counter = counter + 1
output: <tr class="row{counter % 2}">...</tr>
Personally, I name the classes "row0" and "row1", which lets you alternate between them with a simple modulus calculation, also, if you decide to have rows alternating in triples or quads (instead of pairs), you can easily extend it to row2, row3and change your output code to be counter % 4, etc.
就我个人而言，我将类命名为“row0”和“row1”，这使您可以通过简单的模数计算在它们之间交替，此外，如果您决定让行以三元组或四元组（而不是对）交替，则可以轻松扩展它到row2，row3并将您的输出代码更改为counter % 4等。
回答by nickf
I've used a tertiary operator in cases like this. It would look something like:
在这种情况下，我使用了三级运算符。它看起来像：
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>
