使用 jquery tablesorter 插件保留斑马条纹答案

【问题标题】：preserve zebra striping with jquery tablesorter plugin使用 jquery tablesorter 插件保留斑马条纹
【发布时间】：2012-08-31 23:08:57
【问题描述】：

this page 上的表格按tablesorter plugin 排序。排序后不会重新应用糖果条纹，因此在执行排序后，阴影行和非阴影行会以错误的顺序出现。单击名称列以查看此示例。

有没有办法在排序后重做条带化？

【问题讨论】：

您可以考虑使用 CSS 奇偶规则，而不必担心。 [至少对于支持它的浏览器。]
我不知道有 CSS 奇偶规则，我猜是 CSS3？
.tablesorter tr:nth-child(even) 将选择表的偶数行，.tablesorter tr:nth-child(odd) 将选择奇数行：developer.mozilla.org/en/CSS/:nth-child

【解决方案1】：

您必须使用斑马小部件。使用以下代码初始化tablesorter：

$("table.tablesorter").tablesorter({
    widgets: ['zebra']
});

Zebra 是默认包含的唯一小部件。 See here供参考。

【讨论】：

【解决方案2】：

我还发现你可以这样解决这个问题：

$('your_table').tablesorter({
    widgets: ['zebra'],
    widgetZebra: { css: ['normal-row', 'alt-row' ] }
});

在我的例子中，即使我定义了 CSS 类 .even 和 .odd （我相信这是 zebra 小部件分配的默认类），仅初始化 zebra 小部件实际上不会应用表格条带化。

【讨论】：