帮助在可排序表中对行进行颜色交替

我正在使用jQuery tablesorter插件。 我是jQuery的新手，需要jQuery忍者的帮助。

我的表有颜色替代行。 我使用CSS nth-child（）来交替行。

table.tablesorter tbody tr:nth-child(odd) td { background-color:#FBFBFB; } 

它适用于Chrome和Firefox，但IE不喜欢它。 IE不支持nth-child。

当页面加载时，我试图用JavaScript控制颜色交替。

 $(document).ready(function() { $('#packageTbl').tablesorter(); $('table.tablesorter tbody tr:nth-child(odd) td').css('background-color', '#FBFBFB'); $('table.tablesorter tbody tr:nth-child(even) td').css('background-color', '#DDD'); }); 

当页面最初加载时它工作正常，但是当我单击要排序的列时，我的颜色替代行不再交替。 我可能有两个白色行，然后是三个灰色行。

你能提出任何可以帮助我的解决方案吗？

Answer 1

Tablesorter有一个内置函数来“斑马”条纹行，它还会在排序后自动更新条带化。 使用方法如下：

CSS

 .NormRow { background-color: #fbfbfb; } .AltRow { background-color: #ddd; } 

脚本

 $('#packageTbl').tablesorter({ widgets: ['zebra'], widgetZebra: {css: ["NormRow","AltRow"]} // css classes to apply to rows }); 

---

更新：实际上，tablesorter使用的默认CSS是“奇数”和“偶数”，所以如果你愿意，可以将css名称改为。

Answer 2

JavaScript的：

 $('.tablesorter tr:nth-child(odd)').addClass('odd'); 

CSS：

 .odd { background-color:#FBFBFB; } 

示例可以在这里找到 。