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

问题描述：

我想更改行的颜色。
赞，我想要使用JQuery或CSS更改表格行的颜色

改变TR的颜色每5行。
第一个5行绿（0-4行），
接着五行红（5-9行），
接着五行黄色（10-14行）
等......

如果您可以为您的问题添加一些示例代码，那将更加清晰。 – selo 2012-04-09 07:25:51

你如何填充行？ – hofnarwillie 2012-04-09 07:27:31

像

IDIE10001900描述用户是无法在萨格勒布网站的任何电话。电话线不CONNEC优先1IDIE10001901描述用户是无法在萨格勒布网站的任何电话。电话线没有连接优先2

在上面的表格我想根据优先级来改变标识的颜色..... – user1321374 2012-04-10 09:46:29

答

你可以做一些事情，如下，检查比apoply为你想要的颜色化背景下的每个元素和指标.... 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 

});

稍微容易使用的语法是'如果（指数（5）{} else if（index 2012-04-09 07:30:32

@arxanas - yes你说得对...根据那个 – 2012-04-09 07:33:48

为什么要使用'$（this）.css（“背景颜色“，”＃000000“）'当'this.style.backgroundColor ='＃000000''输入较少并且执行速度较快时？ – RobG 2012-04-09 08:59:27

答

你没有张贴什么你到目前为止尝试过，所以请阅读下面的文档。它的简单，但你的Whois总是在你问我之前做你自己的研究！ http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

答

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

这将适用于所有最新的浏览器，但不适用于Great IE 6。 – 2012-04-09 08:00:37

嗨，解决方案很好，但我想改变tr的颜色根据优先............................... .................如果td值是5如果td值是4，则将ot更改为红色将ot更改为绿色 – user1321374 2012-04-10 04:08:33

can你解释一下？ – codef0rmer 2012-04-10 05:25:53

答

一个版本的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行（分组行数乘以颜色数量），它将再次启动该模式。

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

相关推荐