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"}); 
*/