HTML表格行第n個子版本動態內容問題

Question

我有一張表，其<tr> s我通過手動更改表innerHTML來動態填充。當我這樣做的時候，我有的CSS（實現nth-child(odd/even)）失敗。

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

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

所得表具有所有<tr> s的一個nth-child(odd)選擇的顏色方案。

當表與tableVar.innerHTML += "<tr>...</tr>"動態填充的問題出現，然而，事實證明，如果你改變了innerHTML被首先組裝與stringVar += "<tr>...</tr>"一個字符串，然後用tableVar.innerHTML = stringVar分配的innerHTML字符串問題去修改方式遠離並且預期的行爲返回。

爲什麼會發生這種情況？

Answer 1

瀏覽器包裝在<tbody>元素的新行，當你直接連接一個新行到表元素，所以後續的每一行是每個新<tbody>單行，使其適用於nth-child(odd)選擇。這就解釋了爲什麼從頭開始構建新的HTML並將其分配到表中並沒有顯示出問題。當你運行這個例子，你可以通過檢查瀏覽器的開發者控制檯生成的HTML看到這一點：

var table = document.getElementById("table"); 
 
setInterval(function() { 
 
    table.innerHTML += "<tr><td>Test1</td><td>Test 2</td></tr>"; 
 
}, 1000)

tr:nth-child(odd) { 
 
    background-color: #cccccc; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: #FFFFFF; 
 
}

<table id="table"> 
 
    <tbody id="tbody"> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

如果直接追加到表的<tbody>元素代替，你會看到CSS適用於您的新行如預期：

var tbody = document.getElementById("tbody"); 
 
setInterval(function() { 
 
    tbody.innerHTML += "<tr><td>Test1</td><td>Test 2</td></tr>"; 
 
}, 1000)

tr:nth-child(odd) { 
 
    background-color: #cccccc; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: #FFFFFF; 
 
}

<table id="table"> 
 
    <tbody id="tbody"> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>