動態添加然后隱藏新行后，維護表備用行背景

Question

http://jsfiddle.net/bfa78/1/

我有一個表 ，其中使用CSS具有不同背景顏色的 備用行 ：

table tr:nth-child(2n){
    background:#f8f8f8;
}

我的應用程序要求我動態地向表中 添加和隱藏新行 （如Fiddle中所示）。

$('#addrow').on('click',function(){

    $('#datagrid').find('tr:nth-child(2)').after(' <tr class="newrow">  <td>sa</td><td>asd</td><td>sdsa</td><td>sda</td>   </tr>');

});

$('#hiderow').on('click',function(){

    $('#datagrid').find('tr.newrow').fadeOut(400);


});

問題是當我添加新行然后隱藏該行時 ，備用背景圖案會中斷 。 有辦法解決嗎？ 我嘗試給原始行賦予不同的類名，並在它們上應用上面的CSS，但這無濟於事。

Answer 1

您僅將替代樣式設置為具有original類的行。 但是，您要添加具有不同類名（ newrow ）的行。

更改自：

table tr.original:nth-child(2n){

常規行選擇：

table tr:nth-child(2n){

http://jsfiddle.net/bfa78/3/

Answer 2

您需要使用javascript應用顏色

   function applycolors(){
var trs= $('#datagrid tr:not([style="display: none;"])') ;
    for(var i=0;i<trs.length;i++){
        if(i%2!=0){
         trs[i].style.background="#f8f8f8";
        }else{
         trs[i].style.background="#ffffff";
        }
    }
}

http://jsfiddle.net/vikramjakkampudi/bfa78/6/