jquery - Zebra 表排序器在初始排序时不会出现条纹

Question

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

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

出了什么问题？

Jquery版本:1.9.0

表排序器版本:2.7.12

这是我的 JavaScript 代码:

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

提前致谢!

Answer 1

对于 ie8 及更低版本，您可以使用纯 css 解决方案并使用 jQuery 进行备份

看看这里的 fiddle :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"});
 */