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;
}

Answer 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
        }
     });
}

这样，每次生成一组新列时，颜色都会重置。

希望这有帮助。

Answer 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
})

＆＃13;

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
})

＆＃13;

<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>

＆＃13;

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

4 个答案: