javascript - 在多个 TBODY 中更改 TR 的替代颜色

Question

我想更改驻留在多个 TBODY 中的所有 TR 的替代颜色。我的 html 代码如下所示。

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>        
    </tbody>
</table>

我想将替代颜色设置为以下模式。

<table>
        <tbody>
          <tr> [ODD][Red]
          <tr> [EVEN][Green]
          <tr> [ODD][Red]
        </tbody>
        <tbody>
          <tr> [EVEN][Green]
          <tr> [ODD][Red]
        </tbody>
        <tbody>
          <tr> [EVEN][Green]
          <tr> [ODD][Red]
          <tr> [EVEN][Green]
        </tbody>
</table>

我在 StackOverFlow 上尝试了很多示例，但我的场景不匹配。以下是我试过的链接。

Achieve alternate row colours across multiple tbody elements

我只需要使用 CSS 和 Javascript [不是 jquery]。请建议如何实现这一目标。

谢谢

Answer 1

仅使用 CSS 在您的场景中是不可能的。

但是，使用 Javascript，您可以遍历所有 <tr>无论在哪个tbody它包含在内。并且，只为偶数添加一个类......

var trs = document.querySelectorAll("tbody tr");
for(var i=0; i<trs.length; i++) {
  if(i % 2 == 0)
    trs[i].className = "even";
}

tbody tr {
  color: red;
}

tbody tr.even {
  color: blue;
}

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>        
    </tbody>
</table>