jquery - TR 交替背景颜色，TD 数量不等

Question

我正在尝试为每个 . 我知道我可以使用：

tr:nth-child(even) {
    background-color: #000000;
}

然而，正如另一个堆栈问题所说，这仅在我们有相同数量的<td>s 时才有效，但如果我们有不同数量的 s，我们将不会有一个完整的彩色行，而是会停止到最后一个 td。

有没有办法只用css或任何jQuery来做到这一点？

Answer 1

您可以为每一行分配一个类。如果您动态生成表格，这应该非常简单。

<style>
    .rowOdd { background: #C0C0C0; }
    .rowEven { background: #CACACA; }
</style>

<table>
    <tr class="rowOdd">
    (...)
    </tr>
    <tr class="rowEven">      
    (...)
    </tr>
 </table>

等等......或者如果你的布局真的很复杂（很多合并的单元格），那么你可以将类似的类单独添加到每个 td 而不是 tr。

Answer 2

您可以使用奇数/偶数来分别操作每一行。我认为您需要在这里进行真正的演示才能更好地理解。

现场演示

tr:nth-child(even)
{
    background: red;
}         
tr:nth-child(odd)
{
    background: yellow;
}   

Answer 3

我肯定会采用 CSS3 方法。

这个网站非常擅长解释所有可用的不同的第 n 个子语法

http://nthmaster.com

Answer 4

您可以tr:nth-child(2n+1)用于奇数或tr:nth-child(2n+1)纯 CSS。

tr:nth-child(2n+1) > td
{
background-color:#F5F5F5
}