我想使用JQuery或CSS更改表格行的颜色

Question

我想更改行的颜色。

喜欢,

每隔5行更改TR的颜色。

前5行绿色(0-4行)，

接下来五行为红色(5-9行)，

接下来五行为黄色(10-14行)

以此类推......

Answer 1

你可以像下面这样做，检查每个元素的索引，然后添加你想要的背景颜色，....thiw将很容易为你工作。

$('#table tr').each(function(index)
{   
    if( index < 5) 
     $(this).css("background-color", "#000000"); //change color code as you need
    else if( index < 10) 
     $(this).css("background-color", "#0000FF"); //change color code as you need
    else if( index < 15) 
     $(this).css("background-color", "#00FF00"); //change color code as you need
  //////go on for others

}); 

Answer 2

到目前为止，您还没有发布您尝试过的内容，因此请阅读下面的文档。这很简单，但是你总是在问之前先做你自己的研究！http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

Answer 3

试试这个--一个纯粹的CSS解决方案。

// n starts from 0 to infinity. 
// for n+1
//     0+1 = 1
//     1+1 = 2
//     2+1 = 3
//     ... so on...

table tr:nth-child(n+1) {
  color: green;
}
table tr:nth-child(n+6) {
  color: red;
}
table tr:nth-child(n+11) {
  color: yellow;
}

演示：http://jsfiddle.net/29zrT/

更多信息：http://css-tricks.com/how-nth-child-works/