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色を1つの色に設定するだけで、1行おきに変更するだけで済みます。

またはさらに良いことに、これを行うには純粋な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 に答える