帮助在可排序表中替换行颜色

Help to color-alternate rows in sortable table

本文关键字：替换 换行 颜色 排序 帮助      更新时间：2023-09-26

我使用jQuery表排序插件。我对jQuery比较陌生，需要jQuery忍者的帮助。

我的表有不同颜色的行。我使用CSS n -child()来交替行。

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

它在Chrome和Firefox中工作良好，但IE不喜欢它。IE不支持n -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');
});

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

你能给我提个建议吗?

Tablesorter有一个内置的功能来"斑马"条纹的行，它也会在排序后自动更新条纹。使用方法如下:

CSS 

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

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

更新:实际上，表排序器使用的默认CSS是"奇数"answers"偶数"，所以如果你愿意，请更改CSS名称

JavaScript:

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

.odd {
    background-color:#FBFBFB;
}

示例可以在这里找到

相关文章：