Question

我知道我可以使用 odd 和甚至来为表格中的交替行着色。但是，我希望能够为每个第三行着色，因此着色类似于红 - 绿 - 蓝 - 红 - 绿 - 蓝。

此外，我想制作一般内容并使用 n 颜色来设置每个第n行的样式。

目前，我动态生成表格，每次迭代时，我在每个 td <上输入一个类名称，如 modulo0 ， modulo1 等/ em> tag。

有更好的方法吗？一个更自动化的，即。

Answer 1

您希望将:nth-child选择器与3n一起使用，可以在此处添加一个数字，以便从开头，第二或第三开始获取每一秒。

jsFiddle

Table with alternating colours

<强> 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 */

支持

请注意，full support for CSS3 selectors仅在IE9中出现。如果对IE8的支持至关重要，那么需要一个替代解决方案，如手动类或JavaScript。

Answer 2

只需使用nth-child(3n+3)即可。请记住，这不是跨浏览器的解决方案。这是一个working example

Answer 3

可能是较旧的方式，但如果你没有任何问题，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>

用n种颜色在表中着色行

3 个答案:

一般

支持