javascript - 帮助对可排序表中的行进行颜色交替

Question

我正在使用 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 名称更改为该名称。