Question

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

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

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

Answer 1

您可以使用jQuery轻松完成此操作，如下所示：

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

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

我认为这比一些服务器端环境中的客户端更清晰，更易读，

Answer 2

我把它放在标记（服务器端）。它需要服务器不到一毫秒才能完成rowNum = (rowNum - 1) * -1当网站运行缓慢时，由于javascript正在执行多少，这是我的一个宠儿。

Answer 3

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

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

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

Answer 4

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

在PHP中，逻辑看起来像

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

如果您不能进行任何服务器端处理，我建议让JavaScript为每一行设置类标记，而不是直接操作样式。这样，演示文稿留给了CSS，行为留给了JavaScript，如果你确实改变了以后生成类的方式，那么演示代码将保持不变。

Answer 5

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

Answer 6

总有一天，我们可以使用pure CSS。当然，这部分CSS规范是在 2001 中引入的，但它仍然不受支持。 =（

Answer 7

您尝试完成的工作甚至可以使用CSS3完成：

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

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

Answer 8

这取决于您的情况。如果没有动态创建表，则基于JavaScript可以更快地实现多个行。但是，如果您是动态创建表，则可以非常轻松地将每个其他行的类设置为“row_alternate” - 如果您担心某些用户可能没有JavaScript，我更喜欢服务器端方法。 / p>

Answer 9

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

另外，我搜索了“jscript table alternating colors”，并获得了几十种技术链接。

（旁白：对于他们没有写的代码，开发人员永远不会得到赞誉。）

Answer 10

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

Answer 11

我找到了一个很好的网站，用jquery解释你想要实现的目标：

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

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

Answer 12

我会说这取决于具体情况。如果你循环遍历数据以在服务器端创建行，我可能会说你应该在那里做。

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

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

12 个答案: