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

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