將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>