Question

我想改变行的颜色像，

更改TR For Every 5 Rows的颜色前5行绿色（0-4行），
接下来的五行红色（5-9行），
接下来的五行黄色（10-14行）
等等......

Answer 1

你可以做如下的事情，检查每个元素的索引，而不是你想要的背景颜色......这将很容易为你工作..

$('#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

您目前没有发布您尝试的内容，请阅读以下文档。它简单，但你问Whois总是做你自己的研究之前！ 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/

Answer 4

shiplu代码的一个版本：

var t = document.getElementById("tbl");
rows = t.rows;
var colours = ['yellow','green','red'];
var group = 5;
var k = colours.length * group;

for(var j=0, jLen = rows.length; j<jLen; j++){
    rows[j].style.backgroundColor = colours[(j%k)/group | 0];
}

这将使行中的行颜色相同。如果行数超过15行（分组行数乘以颜色数），它将再次启动该模式。

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

4 个答案: