什么是表样式交替行的最好方法？

StackOverflow https://stackoverflow.com/questions/474216

  •  19-08-2019
  •  | 
  •  

题

显然，奇/偶行的实际样式将通过CSS类来完成，但什么是对类“重视”行的最好方法？是不如把它标记，还是更通过客户端的JavaScript来做到这一点？哪个更好？为什么？

为了简单起见，让我们假设这是一个大表，100行，并且该颜色方案是交替的奇数/偶数行。此外，在其它地方需要在页某种JavaScript库，可以很容易做到这一点，以使得包的开销不是一个因素。

这个问题的真正目标是，以确定哪些权衡参与，以及如何将这些权衡应该如何处理，如性能影响到服务器如果页面负载下击（假设动态表） ，带宽命中较低的连接速度，语义点击用户通过添加额外的布局代码的HTML（这里的想法是，HTML是内容，CSS是一种布局，和JavaScript是内容的行为方式以及控制/增广布局）

有帮助吗？

解决方案

您可以用jQuery做到这一点很容易，就像这样：

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

您可以有资格选择多一点，如果你只是想这样做，在一个特定的表，或做在“礼”的元素。

我认为这是有点更清洁和更可读的客户端比它会在一些服务器端的环境中，

其他提示

我把它在标记（服务器端）。它采用服务器比一毫秒就能完成rowNum = (rowNum - 1) * -1这是我的一个忌讳，当一个网站是因为被执行了多少JavaScript的速度慢。

如在其他的答案说，这样做对客户端侧的大表将比在服务器端更慢，并且如果用户已禁用JavaScript可能无法工作。

然而，使用JS框架如 jQuery的使得它很容易，它是确实很诱人：

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

有关这样的大尺寸我会做在服务器端该行的处理，使用PHP或类似的计算为每一行奇数/偶数的类名的表格。该解决方案将那些有关闭JavaScript工作，并且将会比任何JavaScript库处理该大小的表元素性能高很多。

在PHP逻辑会看起来像

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

如果你不能做任何服务器端处理，我会建议有JavaScript的设定每一行的类标签，而不是直接操作风格。通过这种方式，演示文稿是留给CSS和行为是留给JavaScript和如果你改变的方式类在日后产生的演示代码将保持不变。

因为客户可能没有启用JavaScript，我会做这个最初的服务器端。如果要添加/删除行客户端的JavaScript，那么你可能想也必须这样做在客户端上添加后/移除事件已经完成的能力。尽可能你应该尽量让你的界面表现良好没有JavaScript，除非你可以控制浏览器环境中（比如，例如，在Intranet应用程序，你可以要求将其启用）。

有一天，我们就可以只使用纯CSS 。当然，CSS规范的这一部分中介绍了 2001 并它仍然不支持。 =（

你想完成的，甚至可以用CSS3做什么：

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

此也列在的W3的CSS3选择规范。如果你正在寻找的兼容性，加上一流的服务器端或通过JavaScript将是一个更好的解决方案。

这取决于您的方案。基于可能会更快的JavaScript如果未在即时创建表来实施的行数。如果你动态地创建表，但是，你可以很容易地设置类每隔一行是“row_alternate” - 我更喜欢服务器端方法，如果你担心某些用户可能没有的JavaScript <。 / p>

如果您使用的任何类型的框架，这通常是他们包括在第一特征中的一个。

否则我GOOGLE为“JScript的表交替的颜色”，获得几十链接的技术。

（旁白：这太糟糕了开发商从来没有获得信贷的代码，他们的没有写）

我总是将类在服务器端，因为它们是流出来/添加到页面，但如果你有一个客户端重新排序的行会需要重新归类。

我说真的，这视情况而定。如果您是通过循环的数据来创建服务器端行，我可能会说，你应该做它。

此，如果你要开始使用客户端脚本来排序/重新排序行得到了很多更复杂。在这种情况下，如果是100行左右，我可能会倾向于做它的onload事件客户端，因为至少你没有复制的代码的方式来确定该行的颜色。我得承认，这真的取决于它在这种情况下的速度。我可能会尝试一下，看看如果表现作出最后决定之前，可以接受的。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top