Zebra tablesorter 不会在初始排序时进行条带化

Question

我对 tablesorter 插件和 zebra 小部件有疑问，它们为偶数/奇数行启用了不同的样式。

我的页面从一个空表开始；然后，用户编译一个表单，然后我的表被加载......所以问题是：在初始加载（也对列进行排序）时，斑马条纹不起作用；我的行具有所有相同的背景颜色.. 但是当用户开始对列进行排序或转到其他页面结果时（在同一张表上使用“寻呼机”插件），斑马小部件可以工作。

怎么了？

jQuery 版本：1.9.0

tablesorter 版本：2.7.12

这是我的 javascript 代码：

$("table").tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
        zebra: ["even","odd"]
    }
});

提前致谢！

Answer 1

您可以使用仅 css 的解决方案并使用 jQuery 为 ie8 及更低版本进行备份

看这里的小提琴：http://jsfiddle.net/GZPqE/

<table class="zebra">
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
</table>

/*CSS*/
.zebra tr:nth-child(even) {
  background-color: #333;
  color: #fff;
}

/*
 * uncomment this to see the jQuery solution
 $("tr:nth-child(even)").css({"background-color":"blue", "color":"#fff"});
 */

Answer 2

使用 CSS 为偶数行和奇数行着色：

$("table")
  .tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
      zebra: ["even","odd"]
    }
  })
  .find('tr:nth-child(even)')
    .css('background-color', 'white')
    .end()
  .find('tr:nth-child(odd)')
    .css('background-color', 'lightgray')
    .end();