每两行更改表格行颜色

时间:2014-05-27 21:01:52

标签: javascript css3 css-selectors

我有一个HTML表格,想要每两行更改一次行颜色,一次两行。我并不是指使用nth-child(even)选择所有其他行,这是我在搜索引擎结果中一直看到的。我正在尝试设置第1行和第2行的背景颜色,然后设置5和6,然后设置9和10 ......依此类推,其他行保留默认的白色背景。

我尝试使用:nth-child(2n+b),我认为不可能使用该伪选择器。这些表是动态生成的,并且会在行数中波动,因此硬编码不是一种选择。

有没有某种JavaScript方法可以做到这一点?

2 个答案:

答案 0 :(得分:2)

使用CSS :nth-child()符号绝对可以:

tr:nth-child(4n + 1) td,
tr:nth-child(4n + 2) td {
    background-color: #ffa;
}

tr:nth-child(4n + 3) td,
tr:nth-child(4n + 4) td {
    background-color: #f90;
}

JS Fiddle demo

答案 1 :(得分:0)

这是你的PHP问题的解决方案。希望您能将其转换为您所需的JavaScript。

$n = "#666";
$c = 0;
$p = 0;
while($c < 9){
if($p%2 == 0){
$n = ($n == "#666")?"#FFF":"#666";
$p=0;
}
$c++;
}