Question

我想为表格中的行设置备用背景颜色 - 但是我不想让所有其他行都着色，我希望以三行为一组来处理它们。

因此对于一个有八行的表我希望前三个是白色，然后接下来的三个有背景颜色，后两个再次回到白色。

如何使用jQuery执行此操作？

Answer 1

您可以根据结果索引.filter()得出结果集：

$("#table tr").filter(function(idx) {
    return (idx % 6) >= 3
}).addClass('alt');

jsfiddle demo

Answer 2

Jquery每个函数都应该这样做：

http://api.jquery.com/jQuery.each/

$('#mytable > tr').each(function(index, ctr) {
    var id = Math.floor(index / 3) % 2;
    if(id == 0) {
       // CHANGE TO COLOR 1
    } else {
       // CHANGE TO COLOR 2
    }
});

诀窍是整数除以3 [Math.floor（index / 3）]，这将给你三个一组：

rows 0-2 will integer divide to 0 
rows 3-5 will integer divide to 1
rows 6-8 will integer divide to 2

然后你可以修改它以获得其他所有......

Answer 3

由于选择器性能可能较慢，您也可以这样做：

$(":nth-child(6n), :nth-child(6n-1), :nth-child(6n-2)", $("#test"))
    .addClass("alt");

如果您的目标浏览器都支持CSS3（尚未使用），您甚至可以使用CSS3（使用nth-child选择器）完全执行此操作。

Answer 4

如果您在代码中生成了多个<tbody>元素，则可以非常有效地执行此操作：

http://jsfiddle.net/jLJMu/

HTML

<table id='mytable'>
    <tbody>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
    </tbody>
    <tbody>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
    </tbody>
    <tbody>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
    </tbody>
    <tbody>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
    </tbody>
</table>

的jQuery

$('#mytable tbody:nth-child(2n)').addClass('someClass');

使用jQuery在表中替换三行和三行

4 个答案: