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 回答