change backgroundcolor - jQuery/Javascript

Question

I have a table like this:

info1    yes    no    yes    yes
info2    no     yes   no     yes
info3    no     yes   no     no
                ...

I could write some code (see below) that is working fine to set a green/red background if I see yes/no. But now I would like to have a different green/red for the even/odd rows.

Any idea how I can change the code below so I have different green/red for odd/even rows?

var x = document.getElementsByTagName("TD")
var i=0; 
for (i=0;i<x.length;i++) 
{ 
  if (x[i].className=="tdStyle")
  { 
    if (x[i].innerHTML=="Yes") 
    { 
      x[i].style.backgroundColor='LightCoral'; 
      x[i].style.Color='LightCoral'; 
      x[i].style.border='1px solid grey';
      $(x[i]).html('&nbsp;'); 
    } 
    if (x[i].innerHTML=="No") 
    { 
      x[i].style.backgroundColor='lightgreen'; 
      x[i].style.Color='lightgreen';
      x[i].style.border='1px solid grey';
      $(x[i]).html('&nbsp;');
    } 
  } 
}

As Dhaval Marthak asked, I post js fiddle: http://jsfiddle.net/T8Xe9/

Answer 1

As there are some other answers with jQuery and CSS, I'll contribute a fully javascript solution. As mentioned by @DhavalMarthak you can use the modulus operator % to know wether a number is odd or even (by dividing by 2, and see if there's a remainder).

So to add to your code it'll look something like:

+ function () {
var tables = document.getElementsByTagName('table');
for (var k = 0; k < tables.length; k++) {
    var rows = tables[k].getElementsByTagName('tr');
    for (var j = 0; j < rows.length; j++) {
        var x = rows[j].getElementsByTagName("TD")
        for (var i = 0; i < x.length; i++) {
            if (x[i].className == "tdStyle") {
                if(j % 2 == 0 ){  //even row
                    if (x[i].innerHTML == "Yes") {
                        //td style for even yes
                    }
                    if (x[i].innerHTML == "No") { 
                        //td style for even no
                    }
                } else { //odd row
                    if (x[i].innerHTML == "Yes") {
                        //td style for odd yes
                    }
                    if (x[i].innerHTML == "No") { 
                        //td style for odd no
                    }
                }
            }
        }
    }
}}()

Demo

---

That said, I would go with styling with classes and CSS rather than directly in code. An advantage to this is that you can reuse your code and theme/style it for different pages by simply switching css files. So if we use the :nth-child selector which seems to be relatively compatible, we have, for javascript:

    var x = document.getElementsByTagName("TD")
    for (var i = 0; i < x.length; i++) {
        if (x[i].className == "tdStyle") {
            x[i].setAttribute("data",x[i].innerHTML)
            x[i].innerHTML="&nbsp";
        }
    }

and for CSS:

.tdStyle[data=Yes]{
    background:lightcoral;
}

.tdStyle[data=No]{
    background:lightgreen;
}

tr:nth-child(2n) .tdStyle[data=Yes]{
    background:red;
}

tr:nth-child(2n) .tdStyle[data=No]{
    background:green;
}

Demo

Answer 2

Here is a Demo Fiddle

If you are using jQuery, use this:

$('table td.tdStyle:contains("yes")').css({
    "background-color":"lightgreen",
    "border":"1px solid grey",
    "color":"lightgreen"
});
$('table td.tdStyle:contains("yes")').html(' ');

$('table td.tdStyle:contains("no")').css({
    "background-color":"lightcoral",
    "border":"1px solid grey",
    "color":"lightcoral"
});
$('table td.tdStyle:contains("no")').html(' ');

The selector is based on td which contain yes or no

---

For odd/even,

$('table td.tdStyle:odd').css({
    "background-color":"lightgreen",
    "border":"1px solid grey",
    "color":"lightgreen"
});
$('table td.tdStyle.tdStyle:odd').html(' ');

$('table td.tdStyle:even').css({
    "background-color":"lightcoral",
    "border":"1px solid grey",
    "color":"lightcoral"
});
$('table td.tdStyle:even').html(' ');

The selector is based on alternate odd and even td.