在表格中设置交替行样式的最佳方法是什么？答案

【问题标题】：What is the best way to style alternating rows in a table?在表格中设置交替行样式的最佳方法是什么？
【发布时间】：2009-01-23 19:45:13
【问题描述】：

显然，奇/偶行的实际样式将通过 CSS 类完成，但是将类“附加”到行的最佳方法是什么？将它放在标记中更好，还是通过客户端javascript更好？哪个更好？为什么？

为简单起见，我们假设这是一个大表，有 100 行，并且颜色方案是交替奇数行/偶数行。此外，页面中的其他地方需要某种可以轻松执行此操作的 javascript 库，因此该包的开销不是一个因素。

这个问题的真正目标是确定涉及哪些权衡以及应该如何处理这些权衡，例如如果页面在负载下命中（假设是动态表）对服务器的性能影响，连接速度较低的用户的带宽命中，通过向 HTML 添加额外布局代码的语义命中（这里的想法是 HTML 用于内容，CSS 用于布局，javascript 用于内容的行为以及控制/增强布局）

【问题讨论】：

您使用什么服务器端语言？在 ASP.NET 中有一个相当简单和优雅的解决方案。
这与语言无关。任何服务器端语言都可以通过简单的类开/关切换循环输出行。但是，如果有适用于特定语言的简单结构，请注明。
我很确定他指的是 ASP.Net 中的 Repeater 控件，它具有和，这很漂亮。虽然它最终使 ASPX 页面有点多余，所以我通常最终只是在 ItemBound 事件中绑定正确的 CSS 类。
现在更新：正如 here 发布的那样，您可以使用 selectivizr 在 IE6-8 上模拟 CSS3 选择器（您的 CSS 将适用于该版本，并且具有良好支持的浏览器不会被污染IE 的技巧）

标签： html css css-tables

【解决方案1】：

您可以使用 jQuery 轻松做到这一点，如下所示：

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

如果您只想在一个特定的表上执行此操作，或者也对“li”元素执行此操作，您可以对选择器进行更多限定。

我认为这在客户端比在某些服务器端环境中更干净、更易读，

【讨论】：

你应该在行而不是单元格上这样做。

【解决方案2】：

我会把它放在标记中（服务器端）。服务器不到一毫秒就可以完成rowNum = (rowNum - 1) * -1当一个网站因为执行了多少javascript而运行缓慢时，这是我的一个小烦恼。

【讨论】：

rownum = 1- rownum 更简单
或 'alternate = !alternate'（用于布尔值）。无论如何，+1 - 当您只需要 HTML+CSS 时，为什么还要使用 JavaScript？

【解决方案3】：

正如其他答案中所说，在客户端的大表上执行此操作将比在服务器端慢，并且如果用户禁用了 javascript，则可能无法正常工作。

然而，使用像 jQuery 这样的 JS 框架让它变得如此简单以至于它真的很诱人：

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

【讨论】：

简单并不意味着你应该这样做！
cdeszaq 在问题中指出无论如何都会包含一个 javascript 库
我同意这不是最好的解决方案。我建议在服务器端进行，但由于其他答案已经指出，我只是提出了一个替代方案！

【解决方案4】：

对于如此大的表，我会在服务器端进行行处理，使用 PHP 或类似方法计算每行的奇数/偶数类名。此解决方案适用于那些关闭了 JavaScript 的用户，并且比处理这种大小的表格元素的任何 JavaScript 库的性能都要高得多。

在 PHP 中，逻辑类似于

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

如果您无法进行任何服务器端处理，我建议您让 JavaScript 为每一行设置类标签，而不是直接操作样式。这样一来，展示留给 CSS，行为留给 JavaScript，如果您在以后更改类的生成方式，展示代码将保持不变。

【讨论】：

【解决方案5】：

我最初会在服务器端执行此操作，因为客户端可能没有启用 javascript。如果您使用 javascript 在客户端添加/删除行，那么您可能还希望能够在添加/删除事件完成后在客户端上执行此操作。除非您可以控制浏览器环境（例如，在您可以要求启用它的 Intranet 应用程序中），否则您应该尽可能尝试让您的界面在没有 Javascript 的情况下表现良好。

【讨论】：

【解决方案6】：

有一天，我们将能够只使用pure CSS。当然，这部分 CSS 规范是在 2001 中引入的，现在仍然不受支持。 =(

【讨论】：

【解决方案7】：

你想要完成的事情甚至可以用 CSS3 来完成：

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

这也列在the w3's css3 selectors spec 中。如果您正在寻找兼容性，添加类服务器端或通过 javascript 将是一个更好的解决方案。

【讨论】：

【解决方案8】：

这取决于您的情况。如果表不是即时创建的，则基于 JavaScript 的多行可能会更快地实现。但是，如果您正在动态创建表，则可以很容易地将每隔一行的类设置为“row_alternate”——如果您担心某些用户可能没有 JavaScript，我更喜欢服务器端方法。

【讨论】：

【解决方案9】：

如果您使用任何类型的框架，这通常是它们首先包含的功能之一。

另外，我搜索了“jscript 表格交替颜色”并获得了几十个技术链接。

（旁白：太糟糕了，开发人员从来没有因为他们没有编写的代码而获得荣誉。）

【讨论】：

【解决方案10】：

我总是在服务器端应用类，因为它们被流式传输/添加到页面，但如果您有客户端重新排序，则需要重新分类行。

【讨论】：

【解决方案11】：

我找到了一个很好的网站来解释你想用 jquery 实现什么：

这是最终输出- http://15daysofjquery.com/examples/zebra/code/demoFinal.php

这是教程- http://15daysofjquery.com/examples/zebra/

【讨论】：

【解决方案12】：

我真的会说这取决于情况。如果您正在循环数据以在服务器端创建行，我可能会说您应该在那里进行。

如果您要开始使用客户端脚本对行进行排序/重新排序，这会变得更加复杂。在这种情况下，如果它有 100 行左右，我可能倾向于在 onload 事件客户端执行此操作，因为至少这样您就不会复制代码来确定行颜色。我承认，在这种情况下，这真的取决于它的速度。在做出最终决定之前，我可能会尝试一下，看看性能是否可以接受。

【讨论】：