0

我有一个交替行背景颜色的表：

tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #f4f4f4}

该表由两种类型的单元格组成，“.main”和“.sub”。

我希望背景颜色每隔一个“.main”交替，而所有“.sub”行都获得前一个“.main”的颜色。

如果解决方案都是 CSS，那就太好了，但如果它真的是最好的方法，则对 jquery 开放。

有任何想法吗？

<table>
    <tr id='1' class='main'><td></td></tr>
    <tr id='2' class='main'><td></td></tr>
    <tr id='3' class='main'><td></td></tr>
    <tr id='4' class='main'><td></td></tr>
    <tr id='5' class='main'><td></td></tr>
    <tr id='6' class='sub'><td></td></tr>
    <tr id='7' class='main'><td></td></tr>
    <tr id='8' class='main'><td></td></tr>
    <tr id='9' class='sub'><td></td></tr>
    <tr id='10' class='sub'><td></td></tr>
    <tr id='11' class='main'><td></td></tr>
</table>

第 1,3,5,8 行应该是 #f4f4f4

第 2、4、7、11 行应该是#fffff

并且每个 .sub 行的颜色应与前面的 .main 行颜色相同。

（这些表是动态生成的，所以它们的位置会有所不同）

编辑：这是我第一次尝试使用 jQuery http://jsfiddle.net/xjDZm/失败的 jsfiddle

4

1 回答 1

1

我认为这对于纯 CSS 是不可能的，因为您似乎需要设置奇数行的.main样式，而不是奇数行和.main，并且:nth-child不能这样做（您不能使用(tr.main):nth-child(odd)，更不用说您的要求.sub更多复杂）。

所以这是一个jQuery解决方案：

$("tr.main").filter(":even").css("background-color","#CCC");//change to #F4F4F4
$("tr.main").filter(":odd").css("background-color","#FFF");
$("tr.sub").each(function(i,e){
    $(this).css("background-color",$(this).prev().css("background-color"));
});

http://jsfiddle.net/xjDZm/1/

对不起，我不使用 jQuery，所以我不确定是否有更好的编码方式。我只是查找 API 文档以找到有效的方法。

于 2013-04-18T10:20:43.343 回答