jQuery表格样式与CSS表格样式的交替行。

Question

使用服务器生成的表格中的CSS类来为奇偶行设置条纹，还是在document.Ready()中使用jQuery样式更快/更好？

我想开始使用jQuery使我的标记更简洁，但我不确定性能如何，特别是对于更大（多达200行）的表格。

- Caveatrob

Answer 1

根据浏览器的不同，您可能没有选择。jQuery将与像IE7这样的旧浏览器一起使用，这些浏览器没有Nth child选择器。

理想情况下，您应该使用CSS。样式表是样式的最佳位置。

我会在旧浏览器中使用带有JavaScript备份的CSS。例如，如果您想给所有表格上色，请尝试以下操作：

tr:nth-child(2n+1), tr.odd { background:#911100; }
tr:nth-child(2n), tr.even { background:#222200; }

如果浏览器过旧，jQuery会添加.odd和.even类。

//You will need to check which browsers don't support n-th child. But I doubt IE will        for example...
if($.browser.msie && $.browser.version < 9) {
  $('tr:odd').addClass('odd');
  $('tr:even').addClass('even');
}

- Benbob

---

如果您正在服务器端（例如PHP）生成表行，则可以为每一行添加“even”或“odd”类。这样做的好处是它适用于任何值得关注的浏览器，并且性能非常高效（除了根本不使用CSS）。 - Wil Moore III

Answer 2

目前还没有完全实现（尤其是在Internet Explorer浏览器上），但我通常会使用CSS的nth-child属性。例如：

.someclass:nth-child(2n+1) {
    background:#911100;
}

这段代码会使每隔一行的背景色变为#911100。很棒的是，即使你使用jquery删除了一行，CSS也会自动重新着色下面的行。

- Michael Lunsford