Question

我有表，其中我使用CSS 备用行 不同的背景颜色：

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

我的应用程序要求我动态添加和隐藏新行到表（如小提琴中所示）。

$('#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/

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

2 个答案: