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

Question

我有一个 table，我通过手动更改 table 的 innerHTML 动态填充了它的 <tr>。当我这样做时，我的CSS（实现nth-child(odd/even)）失败了。

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

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

结果 table 的所有 <tr> 都具有 nth-child(odd) 选择器的配色方案。

当 table 动态填充 tableVar.innerHTML += "<tr>...</tr>" 时，问题出现了，但是，如果您更改 innerHTML 的修改方式，首先使用 stringVar += "<tr>...</tr>" 然后将 innerHTML 分配给带有 tableVar.innerHTML = stringVar 的字符串问题就消失了，预期的行为 returns.

为什么会这样？

Answer 1

当您将新行直接连接到 table 元素时，浏览器会将新行包装在 <tbody> 元素中，因此每个后续行都是每个新 <tbody> 的一行，使其适用于 nth-child(odd) 选择器。这解释了为什么从头开始构建新的 HTML 并将其分配给 table 并没有显示该问题。当您运行这个例子时，您可以通过检查在浏览器的开发者控制台中生成的 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>

如果您直接附加到 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>

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

HTML Table Row nth-child Dynamic Content Issue

html

javascript

css

webpage