在表中交替排列样式的最佳方法是什么？

本文介绍了在表中交替排列样式的最佳方法是什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

显然，奇数/偶数行的实际样式将通过CSS类来完成，但是什么是附加类到行的最好方法？是更好地把它放在标记，或者是更好地通过客户端JavaScript做它吗？哪个更好，为什么？

为简单起见，我们假设这是一个大表，100行，颜色方案交替奇/偶行。此外，某些类型的javascript库可以轻松地做到这一点，在页面的其他地方，所以包的开销不是一个因素。

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

解决方案

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

$（function（）{ $（'tr：even'）。addClass（'alternateClass'）; $ tr：odd'）。addClass（'mainClass'）; }）;

如果您只想在一个特定的表上执行此操作，

我认为这是一个比在一些服务器端环境中更干净，更易读的客户端， / p>

Obviously, the actual style of the odd/even rows will be done via a CSS class, but what is the best way to "attach" the class to the rows? Is is better to put it in the markup, or is it better to do it via client-side javascript? Which is better and why?

For simplicity's sake, let's assume that this is a large table, 100 rows, and that the color scheme is alternating odd/even rows. Additionally, some sort of javascript library that can easily do this is needed elsewhere in the page and so the overhead of that package is not a factor.

The real goal of this question is to determine what trade-offs are involved as well as how those trade-offs should be handled, such as performance hits to the server if the page is hit under load(assume a dynamic table), bandwidth hits for users with lower connection speeds, semantic hits by adding additional layout code to the HTML (The idea here is that HTML is for content, CSS is for layout, and javascript is for how the content behaves as well as controlling/augmenting the layout)

解决方案

You can do this fairly easily with jQuery, like so:

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

You can qualify the selector a bit more if you just want to do this on one particular table, or do it on 'li' elements as well.

I think this is a bit cleaner and more readable client-side than it would be in some server-side environments,