JavaScript 表格改变颜色

Question

我正在尝试让白色 table 也发生变化，我将它的一排变成了棕色，但另一排是白色，请帮忙谢谢。当我加载页面时，我希望另一行也改变颜色。

这是我的

标记:

<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

你可以不用 javascript 来做到这一点，只需添加以下 css 代码:

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

参见 fiddle例如。