使用 tablesorter 保持交替的行颜色答案

【问题标题】：Maintain alternating row colors with tablesorter使用 tablesorter 保持交替的行颜色
【发布时间】：2012-10-03 05:10:44
【问题描述】：

我目前正在使用 jquery 插件 tablesorter，可在此处找到：http://tablesorter.com/docs/#Download

我的问题是，当我创建奇数行着色并单击表格标题进行排序时，我的交替颜色突然再次混合，因为排序器重新排列了行。有什么方法可以保持交替的行颜色吗？

要查看我的问题是什么，请打开此 jsfiddle，然后单击其中一个行标题。 http://jsfiddle.net/bJCKz/1/

【问题讨论】：

你可以使用 tbody tr:nth-child(odd) { background-color: turquoise; } jsfiddle.net/gromer/HN3ys 我正在尝试找到一个确定的来源，但它似乎适用于除 IE

标签： jquery css

【解决方案1】：

使用

.tablesorter tbody tr:nth-child(odd) {
   background-color: turquoise;   
}

而不是类。这样，规则就会动态应用于奇数行。

更新了演示

【讨论】：

【解决方案2】：

不要直接将类添加到您的行中。使用 here 记录的 CSS 偶数/奇数规则。

示例用法：

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

【讨论】：

但是，如果您只想将其应用于一个 GridView 而不理会其他表格和 gridview 怎么办？
是什么阻止您将特定的 CSS 类仅添加到特定的 GridView？ .myClass tr:nth-child(even) {background: #CCC}