jquery tablesorter插件 – 保留替代的行颜色

我拿了一个html表，我正在应用替代行颜色，并在其上添加了jquery表分类器，以便用户可以对表进行排序。

问题是替代的行颜色现在都搞砸了（基于排序），有多个行具有相同的背景颜色。

有没有办法用jquery表分类器重置替代行颜色？

已经有一个内置于核心的默认小部件zebra ，它将odd和even类应用于交替行。 无论你是否在html文件中添加了class=even/odd ，它都能正常工作。

这很容易设置。 我只是按照表格分类器网站上的说明操作，然后将文档就绪function修改为以下内容：

我在回答这个问题时做了一个例子。 您可以查看结果 ，或查看示例代码 。

根据安东尼的回答，但改为单线（大多数）： 

 function fixStripes() { $('table tr').removeClass('odd even') .filter(':even').addClass('even').end() .filter(':odd').addClass('odd'); } $("table").bind("sort", fixStripes);

JQuery调用可以像上面一样“链接”，使用filter()等操作来限制所选元素，而.end() “重置”到最后一个选择。 换句话说，每个.end() “撤消”前一个.filter() 。 最后的.end()没有了，因为那之后没什么可做的。

为了在排序发生后保持斑马条纹，您需要再次触发斑马线小部件。 

 $('#myTable') .tablesorter({ widgets: ['zebra'] }) .bind('sortEnd', function(){ $("#myTable").trigger("applyWidgets"); });

这不是一个hack，因为你将重用zebra小部件的逻辑而不是复制它。

注意：仅在默认斑马窗口小部件失败的情况下才需要这种解决方法。 我发现在大多数情况下，由于窗口小部件在排序后正确运行，因此不需要此hack。

怎么样： 

 function fixStripes() { var i = 0; var rowclass; $("table tr").each(function() { $(this).removeClass("odd even"); rowclass = (i%2 == 1) ? "odd" : "even"; $(this).addClass(rowClass); }); } $("table").bind("sort", fixStripes);

哦，如果你想要一个非常简单的修复，你可以屏住呼吸这个CSS伪类，以便被所​​有主流浏览器选中： 

 table tr:nth-child(n+1) { color: #ccc; }

但我的猜测是基于FF和公司如何处理动态HTML的CSS，它会设置条带onload，但在排序后不应用CSS。 但我想肯定地知道。

修订和最新的工作解决方案 – 内置 * 这也可以在点击时改变颜色。 *

现在一切都应该自拔了！

通过你的CSS： 

  table.tablesorter tr:nth-child(even) { background-color: #ECFAFF; }
Interesting Posts