Question

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

我的页面以空表开头;然后，用户编译一个表单，然后我的表被加载...所以问题是：在初始加载（也对列进行排序）时，斑马条纹不起作用;我的行具有相同的背景颜色..但是当用户开始对列进行排序或转到其他页面结果时（在同一个表上使用“pager”插件），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 for 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();

Zebra tablesorter在初始排序时不会出现条纹

2 个答案: