HTML表格中每两列CSS / Javascript的交替颜色答案

【问题标题】：Alternate color every two columns CSS/Javascript in a HTML tableHTML表格中每两列CSS / Javascript的交替颜色
【发布时间】：2014-11-06 01:14:38
【问题描述】：

我有一个表，其中包含通过 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 会更好。

谢谢大家！

【问题讨论】：

通常当有人想要交替样式时，你会使用一些 nth-child 魔法，但在这种情况下，我认为 JavaScript 可能是必要的。

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

我相信您将使用 JQuery 事件生成列。

所以我要做的是在活动结束时运行以下函数：

function changeTDColor()
{
    var colorIntivalCount = 2; //how many times of repeat for each color
    var tdCount = 0;
    var currentColor = "#FFFFFF";  //starting from white for example
    var nextColor= "#000000";
    var tempColor= null; //this one is for temporary storing


    $('td').each(function(){
        $(this).css('background-color', currentColor)
        tdCount += 1;
        if(tdCount >= colorIntivalCount) //every time it reach intival, exchange
        {
           tempColor = currentColor;
           currentColor = nextColor;
           nextColor = tempColor; //exchange current color and next color
           tdCount = 0;           //reset the count
        }
     });
}

所以这样一来，每次生成新的一组列，颜色都会被重置。

希望这会有所帮助。

【讨论】：

【解决方案4】：

试试

var colors = ["lightblue", "lightgreen"]
, elem = $("table tr td");
elem.map(function(i, el) {
    $(el).is(":even") 
    ? elem.slice(i, i + 2)
      .css("backgroundColor", colors[0]) 
      && colors.reverse() 
    : null
})

var colors = ["lightblue", "lightgreen"]
, elem = $("table tr td");
elem.map(function(i, el) {
    $(el).is(":even") 
    ? elem.slice(i, i + 2)
      .css("backgroundColor", colors[0]) 
      && colors.reverse() 
    : null
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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 更容易。
如果我想要一列红色，两列蓝色，一列红色，两列蓝色，等等怎么办？你能帮我解决这个问题吗？
@Anonymous 您是否发布了一个问题，包括html、css，描述了预期的结果？