关于javascript：奇偶行不同的CSS样式


Different CSS style on odd and even rows

是否可以仅使用 CSS 为动态生成的表格在奇数行和偶数行上设置不同的样式，而无需我在迭代集合时为每一行设置正确的样式？

相关讨论

我不确定这是否可以跨浏览器工作，我自己更喜欢 jQuery，但是 css-only 应该可以解决问题：

1
2
tr:nth-child(even) { ... }
tr:nth-child(odd) { ... }

您可以使用 nth-child 选择器 http://reference.sitepoint.com/css/pseudoclass-nthchild，但并非所有浏览器都支持它。

您也可以使用 jquery，如前所述，在表格中设置交替行样式的最佳方法是什么？

你可以用 CSS3 做到这一点。

1
2
tr:nth-child(2n+1) /* targets all odd rows */
tr:nth-child(2n) /* targets all even rows */

你可以简单地使用 jquery 并为像

这样的奇数行添加类

1
$("tr:nth-child(odd)").addClass("odd");

并使用 css 作为

对其进行样式设置

1
.odd{background-color:#657383}