Question

我有一张带有斑马条纹的桌子＆＃39;每隔一秒增加一个班级，或者甚至＆＃39;，<tr>，例如：

 $("#summarytable tr:even").addClass("even");

我也在使用Table Sorter插件，如果点击<th>，则允许按字母和数字排序列。

问题在于，甚至＆＃39; <tr>仍然是“偶然”。即使他们已经被插件排序并且他们的订单被洗牌了。所以，即使我删除然后添加＆＃39; .even＆＃39;再次上课，例如：

$("#summarytable th").click(function() {
    $("#summarytable tr").removeClass("even");
    $("#summarytable tr:even").addClass("even");
});

它仍然出现故障。

有没有什么可以重置＆＃39; DOM中元素的顺序，从而重置元素＆＃39; odd＆＃39;或者甚至＆＃39;甚至＆＃39;状态？

开发示例：http://ryanturner.com.au/tipping/index.php?id=4

Answer 1

如果条带化仅用于样式化，则可以使用CSS来回避整个问题。

Example:

tr:nth-child(2n) {
    background: gray;
}
tr:nth-child(2n+1) {
    background: lightgray;
}

如果你真的需要在排序后运行某些功能，快速浏览一下the documentation表明你可以这样做：

$("table").bind("sortEnd", function() { 
    // ...
});

Answer 2

为什么使用jQuery做一些可以用CSS轻松实现的东西？

#summarytable tr:nth-child(even) {
    /* your styles here */
}

无论发生什么情况，都会自动更新。即使用户决定进入DOM Inspector并开始从DOM中删除表行，他们仍然仍然自动更新并且看起来很漂亮。

Answer 3

来自Table Sorter文档，有一个名为Zebra的模块，它添加了相关的类。你这样使用它：

$("table").tablesorter({
  widgets: ["zebra"],
  // change the default striping class names
  widgetOptions : {
    zebra : [ "normal-row", "alt-row" ]
  }
});

重置元素'奇数'或'偶数'状态？

3 个答案: