将CSS“条纹”效果应用于动态插入的JavaScript表格行中

Question

我制作了一个表格。在那里，当我点击按钮时，会添加一行。我想为插入的行分配替代颜色。

$("#new-row").click(function() { 
 
    $('#first').clone(true).insertAfter('#demo tbody>tr:last'); 
 

 
    if ($('#demo tr:last').hasClass("lgrey")) { 
 
    $('#demo tr:last').removeClass("lgrey"); 
 
    $('#demo tr:last').addClass("dgrey"); 
 
    } else if ($('#demo tr:last').hasClass("dgrey")) { 
 
    $('#demo tr:last').removeClass("dgrey"); 
 
    $('#demo tr:last').addClass("lgrey"); 
 
    }; 
 

 
});

.lgrey { 
 
    background-color: #eee; 
 
} 
 

 
.dgrey { 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="demo"> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    </tr> 
 
    <tr class="lgrey" id="first"> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table> 
 

 
<button id="new-row">ADD ROW</button>

但是这段代码运行不会给期望的结果。

请帮助为插入的行分配替代颜色。

Answer 1

您不需要此JavaScript的JavaScript。 。 。改为使用:nth-child(an+b)选择器。这种方法比解决不必要的类和jQuery代码更加清晰。

分别用#demo tr:nth-child(2n+2)和#demo tr:nth-child(2n+3)替换.lgrey和.dgrey选择器。

（请注意，使用even和odd，如一些人所认为的那样不会让你离开的标题行无样式）。

$('#new-row').click(function() { 
 
    $('#first').clone(true).insertAfter('#demo tr:last') 
 
})

#demo tr:nth-child(2n+2) { 
 
    background-color: #eee; 
 
} 
 

 
#demo tr:nth-child(2n+3) { 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="demo"> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    </tr> 
 
    <tr id="first"> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table> 
 

 
<button id="new-row">ADD ROW</button>

Answer 2

你应该真的使用CSS的nth-child(even)和nth-child(even)为此。

$("#new-row").click(function() { 
 
    $('#first').clone(true).insertAfter('#demo tbody>tr:last'); 
 
});

tr:nth-child(even) { 
 
    background-color: #eee; 
 
} 
 

 
tr:nth-child(odd) { 
 
    background-color: #ccc;; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="demo"> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    </tr> 
 
    <tr class="lgrey" id="first"> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table> 
 

 
<button id="new-row">ADD ROW</button>

Answer 3

使用tr:nth-child CSS属性，如：

tr:nth-child(even) { 
    background-color: #004400; 
} 

tr:nth-child(odd) { 
    background-color: #000000; 
} 

将处理为每个tr要么生成静态或动态替代颜色。

Answer 4

使用CSS来处理交替行的颜色

tr:nth-child(even) { 
    background-color: #eee; 
} 
tr:nth-child(even) { 
    background-color: #ccc; 
} 

DEMO

Answer 5

我选择排颜色之前添加新行如下：

$("#new-row").click(function() { 
 
    if ($('#demo tr:last').hasClass("lgrey")) { 
 
    var add = "dgrey"; 
 
    var remove = "lgrey"; 
 
    } else if ($('#demo tr:last').hasClass("dgrey")) { 
 
    var add = "lgrey"; 
 
    var remove = "dgrey"; 
 
    }; 
 

 
    $('#first').clone(true).insertAfter('#demo tbody>tr:last'); 
 

 
    $('#demo tr:last').removeClass(remove); 
 
    $('#demo tr:last').addClass(add); 
 

 
});

.lgrey { 
 
    background-color: #eee; 
 
} 
 

 
.dgrey { 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="demo"> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    </tr> 
 
    <tr class="lgrey" id="first"> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table> 
 

 
<button id="new-row">ADD ROW</button>