用jQuery替換三行和三行的表格

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（索引/ 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（使用nth-child選擇器）完成此操作，前提是您的目標瀏覽器都支持CSS3（尚未）。

Answer 4

如果您生成了多個代碼中的<tbody>元素，你可以做到這一點非常有效地這樣的：

​​

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');​