Question

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

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

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

我希望background-color互相交替“.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首次尝试失败的jsfiddle http://jsfiddle.net/xjDZm/

Answer 1

我不认为纯CSS可以实现这一点，因为您似乎需要设置.main 的奇数行，而不是奇数行和{{1} } ，而.main不能这样做（您不能使用:nth-child，更不用说(tr.main):nth-child(odd)的要求更加复杂了。

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

.sub

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

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

替代行有例外＆gt;继承背景颜色

1 个答案: