JavaScript表会改变颜色

我想把白色的桌子也换一下，我把它换成棕色的一排，但另一排是白色的。请帮忙，谢谢。当我加载页面时，我希望另一行也改变颜色

这就是我所拥有的

标记：

<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>

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

window.onload=changetb；
函数changetb（）
{
var table=document.getElementsByTagName（'table'）[0]；
var trs=table.getElementsByTagName（'tr'）；
对于（var i=0；i，您有：

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

或者更好，只需将
css
中所有行的颜色设置为一种颜色，然后只需每隔一行更改一次即可

甚至更好，只需使用纯CSS即可：

所以你有这个：

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

或者更好，只需将
css
中所有行的颜色设置为一种颜色，然后只需每隔一行更改一次即可

甚至更好，只需使用纯CSS即可：

如果不使用javascript，只需添加以下css代码即可：

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

请参阅示例。
您可以在不使用javascript的情况下执行此操作，只需添加以下css代码：

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

例如，请看。
我不完全理解您的疑虑，但我猜这就是您想要做的

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

（i=0；i
//操纵行
如果（i%2==0）{
行[i].className=“新建类1”；
}否则{
行[i].className=“新建类2”；
}
}

---

然后你可以用css为你的行选择不同的颜色

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

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

（i=0；i //操纵行 如果（i%2==0）{ 行[i].className=“新建类1”； }否则{ 行[i].className=“新建类2”； } }

---

然后你可以使用css为你的行选择不同的颜色

///java

。这是JavaScript，不是java。请不要删除你的问题中对提供的答案至关重要的部分。我已将其回滚到可行状态。

///java

。这是JavaScript，不是java。请不要删除你的部分问题对所提供的答案至关重要的估计。我已将其回滚到可行状态。我发现：）请删除this@Mike：这是一个社区网站。具有相同问题的其他人可能希望看到解决方案。如果您已经找到了，请发布您自己问题的答案并将其标记为答案。我找到了：）请删除this@Mike：这是一个社区网站。其他有同样问题的人可能会喜欢se找到解决方案。如果你已经找到了答案，那么就发布一个你自己问题的答案，并将其标记为答案。