HTML表格中每两列CSS/Javascript交替显示颜色

Question

我有一个表,通过Javascript添加动态列.我正在寻找一种方法来交替每两列的背景颜色,例如:

<table>
  <tr>
    <td>FIRST BGCOLOR</td>
    <td>FIRST BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
    <td>FIRST BGCOLOR</td>
    <td>FIRST BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
  </tr>
</table>

所以我知道如何用CSS进行替代着色(:nth-​​child(odd)等...),但不知道如何让两个列的颜色相同,然后是接下来两个颜色的不同颜色,依此类推......

如何实现这一目标？Javascript或jQuery解决方案也受到欢迎,因为我正在使用已经在项目中的那些,但CSS当然是首选.

谢谢你们!

Answer 1

td{
  background: grey;
  }

td:nth-of-type(4n), td:nth-of-type(4n - 1){
  background: lime;
  }

<table>
  <tr>
    <td>FIRST BGCOLOR</td>
    <td>FIRST BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
    <td>FIRST BGCOLOR</td>
    <td>FIRST BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
    <td>SECOND BGCOLOR</td>
  </tr>
</table>

Answer 2

td
{
    background: #0f0;
}
td:nth-child(4n+3),
td:nth-child(4n+4)
{
    background: #f00;
}