Javascript 使用CSS设置表格样式

我对使用CSS设置表格样式有问题

因此，我的HTML文件中有一个表：

<table class="altrowstable" id="alternatecolor">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

问题是它不会改变颜色，既不是奇数行也不是偶数行

我做错了什么

---

谢谢。

我将为此提供CSS解决方案：

table.class_name tr:nth-child(odd) {
   /* Styles */
}

table.class_name tr:nth-child(even) {
   /* Styles */
}

这就是您所需要的，尽管IE 8和更早版本不支持它

对于表标题，您可以简单地使用不同的选择器覆盖背景样式，如

table.altrowstable tr th {
    background: #fff;
}

---

我将为此提供CSS解决方案：

table.class_name tr:nth-child(odd) {
   /* Styles */
}

table.class_name tr:nth-child(even) {
   /* Styles */
}

这就是您所需要的，尽管IE 8和更早版本不支持它

对于表标题，您可以简单地使用不同的选择器覆盖背景样式，如

table.altrowstable tr th {
    background: #fff;
}

试试这个

试试这个

---

您的CSS中存在问题。您正在为table设置类，而td应该设置类

您还需要修改下面的js，因为样式可以应用于

td

而不是

tr

var rows = table.getElementsByTagName("td"); 

下面是CSS中的问题

table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

你应该改用这个

table td.oddrowcolor{
    background-color:#d4e3e5;
}
table td.evenrowcolor{
    background-color:#c3dde0;
}

---

您的CSS中存在问题。您正在为table设置类，而td应该设置类

您还需要修改下面的js，因为样式可以应用于

td

而不是

tr

var rows = table.getElementsByTagName("td"); 

下面是CSS中的问题

table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

你应该改用这个

table td.oddrowcolor{
    background-color:#d4e3e5;
}
table td.evenrowcolor{
    background-color:#c3dde0;
}

---

我确实检查了您的代码，发现css中的一些更正需要得到预期的解决方案。表和行类名之间应该有一个空格

table .oddrowcolor{
   background-color:#d4e3e5;
}
table .evenrowcolor{
   background-color:#c3dde0;
}

---

我确实检查了你的代码，发现css中有一些修正需要得到预期的解决方案。表和行类名之间应该有一个空格

table .oddrowcolor{
   background-color:#d4e3e5;
}
table .evenrowcolor{
   background-color:#c3dde0;
}

---

我喜欢提供解决方案，不修补或修改原始源代码太多。 您的HTML很好，JScript很好（非常好）。很高兴看到您使用了.classname，因此它是跨brwoser兼容的。所以我所做的就是更改CSS的类

你的代码

找我的钱

---

从您的代码到我的代码的全部更改。8个字符。很简单，不是吗？

我喜欢提供解决方案，不会对原始源代码进行太多修补或修改。 您的HTML很好，JScript很好（非常好）。很高兴看到您使用了.classname，因此它是跨brwoser兼容的。所以我所做的就是更改CSS的类

你的代码

找我的钱

---

从您的代码到我的代码的全部更改。8个字符。很简单，不是吗？

@PaulD.Waite我们有：）PIE不是IE 8不支持第n个孩子的解决办法。正如您链接的页面所说，“PIE不会尝试实现任何CSS3选择器。”@PaulD.Waite您读了吗？@PaulD.Waite我希望您能通过，正确地说…）读超过前十个单词？在互联网上？你在开玩笑吧@PaulD.Waite我们有：）PIE不是IE 8不支持第n个孩子的解决办法。正如您链接的页面所说，“PIE不会尝试实现任何CSS3选择器。”@PaulD.Waite您读了吗？@PaulD.Waite我希望您能通过，正确地说…）读超过前十个单词？在互联网上？你在开玩笑吧！？你检查过小提琴了吗。看起来棋盘代表一行中的一个单元格。OP希望bg颜色效果应用于=行而不是单元格。@AnaMaria:我更新了小提琴，但我的答案仍然有效。为什么要投否决票？你检查过你的小提琴了吗。看起来棋盘代表一行中的一个单元格。OP希望bg颜色效果应用于=行而不是单元格。@AnaMaria:我更新了小提琴，但我的答案仍然有效。为什么要投否决票？