在多个tbody元素中实现交替的行颜色 [英] Achieve alternate row colours across multiple tbody elements

问题描述

CSS中是否有一种方法可以实现交替行阴影处理，所以将多个tbody元素中的所有行都视为一个组?

Is there a way in CSS to achieve alternate row shading all rows across multiple tbody elements are treated as one group?

例如:

<tbody>
    <tr>...</tr>
</tbody>
<tbody>
    <tr>...</tr>
</tbody>
<tbody>
    <tr>...</tr>
</tbody>

我知道第n个孩子，但这在这里行不通，因为如果每个躯干只有一行，那么它们都将被着色为相同的颜色.

I know of nth-child, but that would not work here, since if each tbody only has one row, then they would all get coloured the same.

有人知道实现此行为的任何方法吗?

Anyone know of any ways to achieve this behaviour?

推荐答案

不适用于CSS ...否. nth-of-不能那样工作.您将需要Javascript.

Not with CSS...no. nth-of- doesn't work that way. You would need Javascript.

jQuery使这变得容易.

Jquery makes this easy.

$("#my-table tr:even").css("background-color", "#bbbbff");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 3.1</td>
    </tr>
    <tr>
      <td>Row 3.2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 4.1</td>
    </tr>
    <tr>
      <td>Row 4.2</td>
    </tr>
    <tr>
      <td>Row 4.3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 5</td>
    </tr>
  </tbody>
</table>

这篇关于在多个tbody元素中实现交替的行颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！