jQuery/CSS:将类分配给表取决于它们的顺序

jQuery/CSS: Assigning classes to a table depends on their order

本文关键字：取决于 顺序 分配 CSS jQuery      更新时间：2023-09-26

我有这个表：

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

而且它还在继续。。。我想在文档上准备添加类奇数和偶数取决于他们的位置。以这样的方式结束：

<tbody>
    <tr class="odd">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr class="even">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr class="odd">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr class="even">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    ...
    </tbody>

实现这一目标的方法是什么？我是否必须计算我有多少个表，并根据它们的位置添加类？对我来说，这听起来不安全/不合适。

查看nth-child伪选择器（MDN链接）。

如果您只想分配一些样式，请使用：

tr:nth-child(2n+1) { // odd rows }
tr:nth-child(2n) { // even rows }

编辑：

正如David Thomas所建议的那样，这将提高可读性：

tr:nth-child(odd) { // odd rows }
tr:nth-child(even) { // even rows }

如果您不需要纯CSS解决方案，请使用jQUery并使用:odd/:even选择器。否则Sirko的解决方案会更好。（请注意，第n个子方法不会在IE8及以下版本上运行）

​$("table tr:odd").addClass("odd");
​$("table tr:even").addClass("even");
相关文章：