javascript - 选择表格中的每 4 行

Question

有没有一种方法可以让我在表格中选择 4 行并将其背景设置为红色，然后选择接下来的 4 行并将其背景设置为蓝色？它有点像奇数和偶数，但以不同的方式选择了一组行。有什么想法、帮助、建议、线索、建议吗？

<table>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- even -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
</table>

Answer 1

如果您正在寻找纯 css 解决方案，您可以这样做:

table tr:nth-of-type(n) {

  background: blue;

}

table tr:nth-of-type(8n),

table tr:nth-of-type(8n-1),

table tr:nth-of-type(8n-2),

table tr:nth-of-type(8n-3) {

  background: red;

}

<table>
  <!--- odd -->
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <!--- even -->
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <!--- odd -->
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
</table>