javascript - HTML Table Row nth-child 动态内容问题

Question

我有一张 table <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>" 组装一个字符串来修改然后将 innerHTML 分配给带有 tableVar.innerHTML = stringVar 的字符串问题消失了，预期的行为又回来了。

为什么会这样？

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>