Question

Without resorting to using jQuery, how could one find a replacement function in Javascript or CSS to simulate the css:

table#report tr:nth-child(odd) { background-color:#eeeeee; }

table#report tr:nth-child(even){ background-color:#ffffff; }

I am at a loss and have to find a work around for the above.

Answer 1

Here is a solution using javascript and css clases:

JS:

var children = document.getElementById('report').getElementsByTagName('tr');

for (var i=0, len=children.length; i<len; i++) {
  var child = children[i];
  if (i%2 === 0) {
    child.className += " even";
  } else {
    child.className += " odd";
  }
}​

css:

table#report tr.even {
    background: #F00; /*or the color of your choice*/
}

table#report tr.odd {
    background: #00F; /*or the color of your choice*/
}

​
And a jsfiddle demo: http://jsfiddle.net/rNTH8/2/