交替表格行颜色?

发布于 2024-09-11 09:36:17 字数 169 浏览 10 评论 0原文

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

When generating html tabular data, I just wanted to hear what methods you use to alternate the table row color? For my purposes, I am using Java and JSPs on the backend. I was just planning on looping through the data and if index % 2 == 0 set it to one color else set it to something else. Is this ok? Maybe it would be better if I used some sort of tag library?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

情何以堪。 2024-09-18 09:36:17

如果您可以使用 JSTL(与类似 Java 的解决方案非常相似,但更好),

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

现在就可以使用 CSS 类来定义颜色或其他样式。

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

If you can use JSTL (much similar to Java-like solution, but better),

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

Now have the CSS classes to define colors or other styles.

You can also consider using 'display' tag which does the same thing in server side or jQuery on client side to select rows with odd, even selectors and add the classes.

梅窗月明清似水 2024-09-18 09:36:17

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

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

最后,您可以将表格包装在通用 API 中(例如 getColumns()getRows()getCell()),并使用一个JSP 来渲染它们。

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

That's the most simple solution which works with most browsers. See this answer for some in-depth discussion. If you can avoid IE6, then you can use CSS pseudo-selectors to achieve the same effect. Or you can use JavaScript.

If you need a global solution (i.e. one which works for all your tables without you having to do this looping in several places), you can use a filter and parse the HTML. As long as you keep your HTML clean, the filter can be pretty dump (just read into a buffer upto the next ">", then check what tag you have, add the missing attribute for TR and flush the buffer).

Lastly, you can wrap your tables in a common API (for example getColumns(), getRows() and getCell()) and use one JSP to render them all.

As for taglibs: If you have one, use it. If you don't, then you may be faster if you avoid JSPs altogether and instead write a helper class to format such a table in pure Java. That way, you can easily write unit tests and develop your solution without having to restart your web server all the time.

慵挽 2024-09-18 09:36:17

最简单、最好的方法是使用 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;
}     

the easiest and nicest way is using css nth-child - but, sadly, it's not supported by IE. so, if you need a IE-compatible way, the one you do is ok.

EDIT: the css-solution wuld look like this:

tbody:nth-child(2n) { /* even rows */ 
  background-color:#eee;
}     
tbody:nth-child(2n+1) { /* odd rows */
  background-color:#ccc;
}     
踏月而来 2024-09-18 09:36:17

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

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

The general JSP guideline is to not interleave Java code in your JSP, but to use tags that encapsulate that Java code. So if I were you I'd avoid the index % 2 == 0.

You can do this in CSS3 using the even pseudo-selector as well. W3 has an example.

情深如许 2024-09-18 09:36:17

我们更喜欢在客户端使用 JavaScript 进行表行着色。这甚至减轻了服务器的(轻微)负担。
然而,这对于大型表(> 100 行)来说并不可取

We prefer to use JavaScript for table-row-coloring at client side. This even reduces (slight) burden from server.
However this is not preferable for large tables (>100 rows)

猫七 2024-09-18 09:36:17

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

If you already are using jQuery, consider using the even (or odd) selector. There even is a table row coloring example on the documentation page for the even selector.

鸢与 2024-09-18 09:36:17

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

mootools zebra. David walsh has a good writeup http://davidwalsh.name/mootools-zebra-tables-plugin

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文