帮助对可排序表中的行进行颜色替换 [英] Help to color-alternate rows in sortable table

问题描述

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

I'm using jQuery tablesorter plugin. I'm relatively new to jQuery and need help from jQuery ninjas.

我的表格有可替换颜色的行.我使用CSS nth-child()来替换行.

My table has color-alternative rows. I used CSS nth-child() to alternate the rows.

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

它在Chrome和Firefox中运行良好，但IE不喜欢它. IE不支持nth-child.

It works fine in Chrome and Firefox but IE doesn't like it. IE doesn't support nth-child.

我试图在页面加载时使用JavaScript控制颜色替换.

I tried to control color-alternating with JavaScript when page loads.

$(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');
});

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

And it works fine when the page originally loads but when I click on a column to sort, my color-alternative rows do not alternate any more. I might have two white rows then three gray ones.

您能提出任何对我有帮助的解决方案吗?

Can you suggest any solution that can help me.

推荐答案

Tablesorter具有内置功能，可对行进行斑马纹"分割，并在排序后自动更新分拆.如下使用它:

Tablesorter has a built in function to "zebra" stripe the rows, it also automatically updates the striping after sorting. Use it as follows:

CSS

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

脚本

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

---

更新:实际上，表排序器使用的默认CSS是"odd"和"even"，因此，如果您愿意，可以将CSS名称更改为该CSS名称.

---

Update: Actually, the default CSS the tablesorter uses is "odd" and "even" so change the css names to that if you wish.

这篇关于帮助对可排序表中的行进行颜色替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！