javascript alternating color rows of tables

Question

I have a page with several tables on it with the same class name. I want to alternate the colors of the rows of every table on this page. I'm using the code below with . This code isn't working correctly, because only 1 table is alternating colors at a time (the first table). what am I doing wrong? All the tables on my page has "mytable" class.

function altrows(classname,firstcolor,secondcolor)
{
    var tableElements = document.getElementsByClassName(classname) ;
    for(var j= 0; j < tableElements.length; j++)
    {
        var table = tableElements[j] ;

        var rows = table.getElementsByTagName("tr") ;
        for(var i = 0; i < rows.length; i=i+2)
        {
            rows[i].bgColor = firstcolor ;
            rows[i+1].bgColor = secondcolor ;
        }
    }
}

Answer 1

Zebra striping is easy with jQuery. Check it. Worth using and understanding and you can implement the same.

Sitepoint has a good tutorial doing it using just javascript. no jquery.

Answer 2

<script type="text/javascript">
function altrows(classname,firstcolor,secondcolor)
{
    var tableElements = document.getElementsByClassName(classname) ;
    for(var j = 0; j < tableElements.length; j++)
    {
        var table = tableElements[j] ;

        var rows = table.getElementsByTagName("tr") ;
        for(var i = 0; i <= rows.length; i++)
        {
            if(i%2==0){
                rows[i].style.backgroundColor = firstcolor ;
            }
            else{
                rows[i].style.backgroundColor = secondcolor ;
            }
        }
    }
}
</script>

Answer 3

If one of your tables has an odd number of rows, your function will break on the line

        rows[i+1].bgColor = secondcolor ;

and not process any of the following tables. You should either check whether there is a row before setting the secondcolor:

function altrows(classname,firstcolor,secondcolor)
{
   var tableElements = document.getElementsByClassName(classname) ;
   for(var j= 0; j < tableElements.length; j++)
   {
      var table = tableElements[j] ;

      var rows = table.getElementsByTagName("tr") ;
      for(var i = 0; i < rows.length; i=i+2)
      {
        rows[i].bgColor = firstcolor ;
        if ( i+1 < rows.length ) {
            rows[i+1].bgColor = secondcolor ;
        }
      }
   }
}

or loop over every row rather than looping over sets of two rows:

function altrows(classname,firstcolor,secondcolor)
{
   var tableElements = document.getElementsByClassName(classname) ;
   for(var j= 0; j < tableElements.length; j++)
   {
      var table = tableElements[j] ;

      var rows = table.getElementsByTagName("tr") ;
      for(var i = 0; i < rows.length; i++)
      {
        rows[i].bgColor = (i%2==0) ? firstcolor : secondcolor ;
      }
   }
}

Answer 4

rows[i] will always exists, but rows[i + 1] might not exists. Then rows[i+1].bgColor = secondcolor ; causes some kind of fatal error that breaks whole script.

1. Consider using CSS:

   table tr:nth-child(even) {
       background-color: red;
   }
   
   
   table tr:nth-child(odd) {
       background-color: blue;
   }
   

2. Or use fixed JS:

   function altrows(classname,firstcolor,secondcolor) { var tableElements = document.getElementsByClassName(classname) ;

   for(var j = 0; j < tableElements.length; j++)
   {
       var table = tableElements[j] ;
   
   
   var rows = table.getElementsByTagName("tr") ;
   for(var i = 0; i &lt; rows.length; i++)
   {
       rows[i].bgColor = i % 2 == 0 ? firstcolor : secondcolor ;
   }
   
   
   }
   

   }