斑马表排序器在初始排序时不会出现条纹

Question

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

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

怎么了？

jQuery版本：1.9.0

表格排序器版本：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();