3

在生成html表格数据时，我只是想听听您使用什么方法来交替表格行颜色？出于我的目的，我在后端使用 Java 和 JSP。我只是计划循环遍历数据，如果index % 2 == 0将其设置为一种颜色，else则将其设置为其他颜色。这个可以吗？如果我使用某种标签库可能会更好？

4

7 回答 7

4

如果您可以使用 JSTL（非常类似于类似 Java 的解决方案，但更好），

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

现在有了 CSS 类来定义颜色或其他样式。

您还可以考虑使用在服务器端执行相同操作的“显示”标签或在客户端使用 jQuery 来选择具有奇数、偶数选择器的行并添加类。

于 2010-07-26T12:27:23.363 回答
2

这是适用于大多数浏览器的最简单的解决方案。请参阅此答案以进行深入讨论。如果你可以避免 IE6，那么你可以使用 CSS 伪选择器来达到同样的效果。或者您可以使用 JavaScript。

如果您需要一个全局解决方案（即一个适用于所有表格的解决方案，而无需在多个地方进行循环），您可以使用过滤器并解析 HTML。只要您保持 HTML 干净，过滤器就可以很好地转储（只需读入缓冲区直到下一个“>”，然后检查您拥有的标签，添加缺少的属性TR并刷新缓冲区）。

最后，您可以将表包装在一个通用 API（例如和）中getColumns()，并使用一个 JSP 来呈现它们。getRows()getCell()

至于标签库：如果有，请使用它。如果你不这样做，那么如果你完全避免使用 JSP，而是编写一个帮助类来用纯 Java 格式化这样的表，你可能会更快。这样，您可以轻松地编写单元测试并开发您的解决方案，而无需一直重启您的 Web 服务器。

于 2010-07-26T12:14:12.403 回答
1

最简单和最好的方法是使用 css nth-child - 但遗憾的是，IE 不支持它。所以，如果你需要一种兼容 IE 的方式，你做的就可以了。

编辑： css 解决方案看起来像这样：

tbody:nth-child(2n) { /* even rows */ 
  background-color:#eee;
}     
tbody:nth-child(2n+1) { /* odd rows */
  background-color:#ccc;
}
于 2010-07-26T12:08:02.690 回答
0

一般的 JSP 指导原则是不要在 JSP 中交错 Java 代码，而是使用封装该 Java 代码的标记。所以如果我是你，我会避免使用索引 % 2 == 0。

你也可以在 CSS3 中使用 even 伪选择器来做到这一点。W3 有一个例子。

于 2010-07-26T12:06:34.923 回答
0

我们更喜欢在客户端使用 JavaScript 为表格行着色。这甚至减少了服务器的（轻微）负担。但是，这对于大型表（> 100 行）并不可取

于 2010-07-26T12:11:50.753 回答
0

如果您已经在使用 jQuery，请考虑使用偶数（或奇数）选择器。在偶数选择器的文档页面上甚至有一个表格行着色示例。

于 2010-07-26T12:16:09.280 回答
0

mootools 斑马。David walsh 有一篇很好的文章http://davidwalsh.name/mootools-zebra-tables-plugin

于 2010-08-02T13:01:40.103 回答