javascript - 动态添加然后隐藏新行后维护表格备用行背景

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/