Zebra tablesorter在初始排序时没有条纹

Question

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

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

出了什么问题？

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来影响你对偶数和奇数行：

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

Answer 2

您可以使用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"}); 
*/