0

我知道我可以使用奇数和偶数来为表格中的交替行着色。但是，我希望能够每隔三行着色一次，所以着色就像red-green-blue-red-green-blue。

此外，我想让它通用并使用n种颜色来设置每个 n:th 行的样式。

目前，我动态生成表，并且对于每次迭代，我在每个td标签上输入一个类名，如modulo0、modulo1等。

有没有更好的办法？一个更自动的，那就是。

4

3 回答 3

5

您想使用:nth-child选择器3n，可以在此处添加一个数字以获取从开始、第二或第三开始的每一秒。

jsFiddle

具有交替颜色的表

HTML

<table>
    <tr><td>R</td></tr>
    <tr><td>G</td></tr>
    <tr><td>B</td></tr>
    <tr><td>R</td></tr>
    <tr><td>G</td></tr>
    <tr><td>B</td></tr>
</table>

CSS

tr:nth-child(3n+1) td { 
    background-color:red;
}
tr:nth-child(3n+2) td { 
    background-color:green;
}
tr:nth-child(3n) td { 
    background-color:blue;
}

一般来说

更一般地，替换3为要更改颜色的行数。

tr:nth-child(2n) td { } /* every second row */
tr:nth-child(4n) td { } /* every fourth row */
tr:nth-child(10n) td { } /* every tenth row */

支持

请注意，对 CSS3 选择器的完全支持仅在 IE9 中提供。如果对 IE8 的支持是必不可少的，则需要替代解决方案，例如手动类或 JavaScript。

于 2013-03-21T09:09:34.980 回答
1

只需使用nth-child(3n+3). 请记住，这不是一个跨浏览器的解决方案。这是一个工作示例

于 2013-03-21T09:14:08.060 回答
0

可能是较旧的方式，但如果您对 javascript 没有任何问题，也可以在下面尝试。

<body>
    <script language="JavaScript" type="text/javascript">

    function altrows(tableid,firstcolor,secondcolor,thirdcolor)
    {
          var rows = document.getElementById(tableid).getElementsByTagName("tr");

      for(var i = 0; i < rows.length; i++)
      {
        i -= 1;

        for (var b=0;b<=2;b++) { 
            i +=1; 
            if(b==0){ rows[i].bgColor = firstcolor; }
            if(b==1){ rows[i].bgColor = secondcolor; }  
            if(b==2){ rows[i].bgColor = thirdcolor; }       
            }
        }
    }
    </script>


<body onLoad="altrows('tb_detail','#FF0321','#44FF03','#2103FF')">

<table cellpadding="0" cellspacing="0" border="0" width="90%" id="tb_detail">   
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
</table>
</body>
于 2013-03-21T10:44:45.577 回答