2

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

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

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

4

12 回答 12

11

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

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

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

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

于 2009-01-23T19:51:56.183 回答
6

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

于 2009-01-23T19:49:19.123 回答
2

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

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

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});
于 2009-01-23T19:52:57.383 回答
1

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

在 PHP 中，逻辑看起来像

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

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

于 2009-01-23T19:48:29.123 回答
1

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

于 2009-01-23T20:05:43.833 回答
1

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

于 2009-01-23T20:09:03.997 回答
1

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

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

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

于 2009-01-23T20:10:53.540 回答
0

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

于 2009-01-23T19:49:58.310 回答
0

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

否则，我在 Google 上搜索“jscript 表格交替颜色”并获得了几十个技术链接。

（顺便说一句：开发人员从来没有因为他们没有编写的代码而获得赞誉，这太糟糕了。）

于 2009-01-23T19:52:18.073 回答
0

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

于 2009-01-23T19:55:24.540 回答
0

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

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

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

于 2009-01-23T19:58:22.817 回答
0

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

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

于 2009-01-23T20:01:18.647 回答