1


我想改变行的颜色。
喜欢，

每 5 行更改 TR 的颜色。
前5行绿色（0-4行），后
5行红色（5-9行），后
5行黄色（10-14行）
等等......

4

4 回答 4

2

您可以执行以下操作，检查每个元素的索引，然后根据需要调整背景颜色 ....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

});
于 2012-04-09T07:29:10.470 回答
1

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

于 2012-04-09T07:29:49.863 回答
1

试试这个 - 一个纯 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/

于 2012-04-09T07:50:04.550 回答
0

一个版本的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];
}

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

于 2012-04-09T08:58:02.120 回答