Alternate color every two columns CSS/Javascript in a HTML table

Question

I have a table that has dynamic columns added to it by Javascript. I am looking for a way to alternate the background color of every two columns, such as:

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

So I know how to do alternate coloring with CSS (:nth-child(odd) etc..), but not how to have TWO columns the same color, then different color for the next two, and so on...

How can this be acheived? Javascript or jQuery solutions are also welcomed as I am using those already in the project, but CSS would be preferrable of course.

Thank you all!

Normally when someone wants alternating styles, you'd use some nth-child magic, but in this case I think JavaScript might be necessary. — TylerH
– TylerH, Commented Nov 5, 2014 at 15:24

Duroth · Accepted Answer · 2014-11-05 15:42:16Z

6

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

answered Nov 5, 2014 at 15:42

Duroth

6,5812 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom · Accepted Answer · 2014-11-05 15:42:36Z

6

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>

answered Nov 5, 2014 at 15:42

Tom

6483 silver badges9 bronze badges

Comments

Chen Sturmweizen · Accepted Answer · 2014-11-05 15:46:29Z

I believe that you will be generating columns using an JQuery event.

So what i would do is to run the function below at the end of your event:

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

So in this way, every time you generate a new set of columns, the color will be reset.

Hope this helps.

guest271314 · Accepted Answer · 2014-11-05 17:14:38Z

0

Try

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>

edited Nov 5, 2014 at 17:14

answered Nov 5, 2014 at 17:07

guest271314

1

3 Comments

Nick Over a year ago

THanks for this, though I found it easier using CSS in this case.

Ionut Necula Over a year ago

What if I want to have a column a red, two columns blue, a column red, two colums blue, and so on? Can you help me with this, please?

guest271314 Over a year ago

@Anonymous Have you posted a Question including html, css, describing expected result?

Collectives™ on Stack Overflow

Alternate color every two columns CSS/Javascript in a HTML table

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related