JavaScript Tables change colors

Question

I'm trying to get the white table to change as well, I have it changing brown for one row but the other is white please help thanks. When i load the page i want the other row to change colors as well.

This is what I have

Markup:

<div id="wrapper">
        <div id="masthead">
            <h1>Zebra Striping Applied to Tables</h1>
            <h2>Odd and Even Rows have alternate background and foreground colours.</h2>
        </div>
        <div id="main">
            <table class="zebra">
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th>Monday</th>
                        <th>Tuesday</th>
                        <th>Wednesday</th>
                        <th>Thursday</th>
                        <th>Friday</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>8am</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                        <td>Particle Physics</td>
                        <td>Economics for Field Mice</td>
                        <td>Cooking with Black Holes</td>
                    </tr>
                    <tr>
                        <td>9am</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                        <td>Particle Physics</td>
                        <td>Economics for Field Mice</td>
                        <td>Cooking with Black Holes</td>
                    </tr>
                    <tr>
                        <td>10am</td>
                        <td>Cooking with Black Holes</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                        <td>Particle Physics</td>
                        <td>Economics for Field Mice</td>
                    </tr>
                    <tr>
                        <td>11am</td>
                        <td>Cooking with Black Holes</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                        <td>Particle Physics</td>
                        <td>Economics for Field Mice</td>
                    </tr>
                    <tr>
                        <td>12pm</td>
                        <td>Lunch</td>
                        <td>Lunch</td>
                        <td>Lunch</td>
                        <td>Lunch</td>
                        <td>Lunch</td>
                    </tr>
                    <tr>
                        <td>1pm</td>
                        <td>Economics for Field Mice</td>
                        <td>Cooking with Black Holes</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                        <td>Particle Physics</td>
                    </tr>
                    <tr>
                        <td>2pm</td>
                        <td>Economics for Field Mice</td>
                        <td>Cooking with Black Holes</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                        <td>Particle Physics</td>
                    </tr>
                    <tr>
                        <td>3pm</td>
                        <td>Particle Physics</td>
                        <td>Economics for Field Mice</td>
                        <td>Cooking with Black Holes</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                    </tr>
                    <tr>
                        <td>4pm</td>
                        <td>Particle Physics</td>
                        <td>Economics for Field Mice</td>
                        <td>Cooking with Black Holes</td>
                        <td>Basket Weaving</td>
                        <td>Dragon Anatomy</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

CSS:

@charset "utf-8";
/* CSS Document */

/*  main.css  */

/***************************************
                    DEFAULTS
***************************************/
.new_class {
background-color: #432;
}

*{
    padding:0;
    margin:0;
}
html, body{
    background:#996;
}
body{
    font-size: 62.5%;   
}
h1{
    font-size: 3.2em;
    padding: 20px;
}
h2{
    font-size: 2.0em;
    color:#666;
    padding:10px 20px;
}
p{
    font-size: 1.6em;
    color:#333; 
    padding: 8px 20px;
}
code{
    font-size: 1.6em;
    color:#903; 
}

/***************************************
                    LAYOUT
***************************************/
#wrapper{
    width:960px;
    margin:10px auto;
    border:1px solid #333;
    background:#fff;    
}
#masthead{
    min-height: 120px;
    border-bottom:8px solid #666;
    color:#903;
}
#main{

}
#footer{
    background:#ddd;    
}

/***************************************
                    TABLES
***************************************/
table{
    width:710px;
    margin:10px auto;
}
thead tr th:first-child{
    background:#fff;
    width: 40px;
}
th{
    padding: 3px 6px;
    margin: 0 2px;
    font:bold 1.6em/1.2 "Palatino Linotype", "Book Antiqua", Palatino, serif;
    background: #666;
    color: #fff;
    width: 90px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;    
    -webkit-border-radius-topright: 6px;
    -webkit-border-radius-topleft: 6px; 
    border-radius-topright: 6px;
    border-radius-topleft: 6px; 
}
tbody tr td:first-child{
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-topleft: 6px;    
    -webkit-border-radius-bottomleft: 6px;
    -webkit-border-radius-topleft: 6px; 
    border-radius-bottomleft: 6px;
    border-radius-topleft: 6px; 
    text-align:right;
    background:#CCC;
    width: 40px;
}
td{
    padding:3px 8px;
    margin:0;
    font:normal 1.6em/1.2 "Palatino Linotype", "Book Antiqua", Palatino, serif;
    border:1px solid #666;
    min-height: 40px;
}
/***************************************
                    SPECIAL
***************************************/

Javascript:

window.onload = changetb;

    function changetb()
    {

        var table = document.getElementsByTagName('table')[0];

        var trs = table.getElementsByTagName('tr');

        for (var i = 0; i<trs.length; i++) 
        {
            if (i % 2)
                trs[i].className += 'new_class';
        } 
    }

Answer 1

You can do that without javascript, just add the following css code:

tr:nth-child(even) {background: #432}

See fiddle for example.

Answer 2

So you have this:

for (var i = 0; i<trs.length; i++) {
    if (i % 2)
        trs[i].className += 'new_class';
} 

just add an else clause:

for (var i = 0; i<trs.length; i++) {
    if (i % 2)
        trs[i].className += 'new_class';
    else
        trs[i].className += 'some_other_class';
} 

Or even better, just set the color of all the rows in your css to one color and then you only need to change every other row.

Or even betterer, just use pure CSS to do this:

http://www.w3.org/Style/Examples/007/evenodd

Answer 3

I did not completely understand your doubt but I guess this is what you want to do...

for(i = 0; i < rows.length; i++){         
  //manipulate rows 
  if(i % 2 == 0){ 
    rows[i].className = "new_class_1"; 
  }else{ 
    rows[i].className = "new_class_2"; 
  }
}

And then you can have css with choice of alternate colors for your rows