Question

我正在尝试动态创建表。并相应地更新单元格值。这些值是异步返回的，因此它们理论上可以引用任何列。根据情况，列数可以随时变化，但表的此部分的行数是常量（7）。

td {
  border: 1px solid black;
}

.dummyTable td.components:nth-child(5n+2) {
    color: red;
}

<table class="dummyTable" style="display: table;">

<tbody>
<tr>

<th style="background-color:#898b8c; color:white">A</th>
<th style="background-color:#898b8c; color:white">B</th>
<th style="background-color:#898b8c; color:white">C</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">37</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">38</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">36</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">39</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">40</th>
</tr>

<tr>
      <td rowspan="3">A</td>
      <td>B</td>
      <td>C</td>

      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #fff082 ">1</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
</tr>

<tr>
      <td>B</td>
      <td>C</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
</tr>
<tr>
      <td></td>
      <td style="background-color:#d5e7ed;">Total</td>
      <td id="37" style="background-color:#d5e7ed">0</td>
      <td id="38" style="background-color:#d5e7ed">1</td>
      <td id="36" style="background-color:#d5e7ed">0</td>
      <td id="39" style="background-color:#d5e7ed">0</td>
      <td id="40" style="background-color:#d5e7ed">0</td>
</tr>

<tr>
      <td rowspan="7">S</td>
      <td rowspan="7">E</td>

      <td>s1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">2</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
</tr>
<tr>
      <td>s2</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
</tr>
<tr>
      <td>s3</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">3</td>
      <td class="components" style="background-color:#fff082">3</td>
      <td class="components" style="background-color:#fff082">4</td>
</tr>
    <tr>
      <td>s4</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s5</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s6</td>

      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s7</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
  </tbody>
</table>

我正在尝试使用第n个孩子一次更新一列。我的想法是，我需要知道的是表格中有多少列，以及我当时处理的列。

例如，如果有5列，则n为5，我认为常量会修改我正在讨论的列。

即。 5n + 1应更新5列圆柱的第1列。并且3n + 2应该修改3个圆柱表的第2列。

我所指的列是具有“组件”类的列。

我认为我遇到的问题是我不确定“组件”单元格是如何编制索引的。即它们是逐行还是逐列。

我在考虑数学中的第n个术语：

因此，如果在这种情况下公式为5n + 0：

我想象的第一个突出显示的单元格将是5：5（1）+ 0 = 5 然后，下一个突出显示的单元格索引将是10：5（2）+ 0 = 10

我也不确定他们是从零指数开始还是1。

除了第一行之外，这个过程对我来说都是有效的。但是当我在片段中进行测试时，它似乎并没有完全按照我预期的方式移动。

（注意）我修改了示例以获取原始返回表的一部分，代码在CSS而不是jQuery中，而不是修改值，我在这里更改颜色。这是为了简单起见，因为我不认为这会影响逻辑。

Answer 1

在＆＃34; Total＆＃34;之后第一行没有按预期工作。因为那行有七列。 td.components:nth-child(5n+2)只会将其样式应用于第二个孩子（如果该孩子匹配td.components），然后每个第五个孩子应用于第二个孩子，前提是每个第五个孩子也匹配td.components。

但是，它仍会计算其他孩子。在第一行中，您有两个rowspan="7"列。所以它计算这两个，没有将样式应用于第二列，因为它没有.components类，然后计算5列，并将样式应用于该列，因为它有类.components。

在以下行中，至少在标记中，每个行只有6列，因此每行的第2列获取应用的样式，因为每行中的第2列具有班.components。

因此，如果您希望不计算前两列，则需要将它们放在自己的行中或使用一些不同的逻辑，例如集成:not()选择器等。

或者，如果您想使用jQuery来应用这些样式，您可以这样做，只需告诉循环忽略Total行之后的第一行并将特定样式应用于该行。

CSS nth-child没有达到预期的效果

1 个答案: