0

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

这就是我所拥有的

标记：

<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';
        } 
    }
4

3 回答 3

3

您可以在没有 javascript 的情况下执行此操作，只需添加以下 css 代码：

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

例如，参见小提琴。

于 2013-01-28T16:35:58.253 回答
1

所以你有这个：

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

只需添加一个else子句：

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

或者更好的是，只需将您的所有行的颜色设置css为一种颜色，然后您只需要每隔一行更改一次。

或者更好的是，只需使用纯 CSS 即可：

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

于 2013-01-28T16:31:02.107 回答
0

我不完全理解你的疑问，但我想这就是你想要做的......

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"; 
  }
}

然后你可以让 css 为你的行选择其他颜色

于 2013-01-28T16:44:20.910 回答