Question

我有一张表<tr>我通过手动更改表格innerHTML来实时填充。当我这样做时，我所拥有的CSS（实现nth-child(odd/even)）失败。

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

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

结果表的所有<tr>都是nth-child(odd)选择器的颜色方案。

当用tableVar.innerHTML += "<tr>...</tr>"动态填充表格时会出现问题，但是，如果您通过首先使用innerHTML汇总字符串来更改stringVar += "<tr>...</tr>"的修改方式，则会发现将innerHTML分配给带有tableVar.innerHTML = stringVar的字符串，问题就会消失，预期的行为会返回。

为什么会这样？

Answer 1

当您将新行直接连接到表元素时，浏览器会将您的新行包装在<tbody>元素中，因此每个后续行都是每个新<tbody>的一行，使其适用于{ {1}}选择器。这解释了为什么从头开始构建新的HTML并将其分配给表不会显示该问题。您可以通过在运行此示例时检查浏览器开发人员控制台中生成的HTML来查看此内容：

nth-child(odd)

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>元素，您将看到CSS按预期应用于新行：

<tbody>

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;
}

HTML表行第n个子动态内容问题

1 个答案: