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名称更改为。

Answer 2

JavaScript的：

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

CSS：

.odd {
    background-color:#FBFBFB;
}

Example can be found here

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

2 个答案: