更改表的 tr：即使使用不同的背景颜色

Question

我知道如何使用jquery做到这一点，通过这样做：

$("#rateTable tr:even").css("background", "#e7edea");

但是，我使用的格式不允许jquery。我尝试了下面的代码，但它说样式为空。有人看到我做错了什么吗？

document.getElementById("rateTable tr:even").style.background = "#e7edea";

<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
</table>

Answer 1

你真的不需要JavaScript。它可以在普通的 CSS 中使用第 n 个子伪类来完成。

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

<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
</table>

Answer 2

您可以使用#rateTable tr:nth-of-type(even)作为选择器来执行此操作。document.selectElementById()仅在您为其提供用作 id 而不是 CSS 选择器的确切字符串时才有效。我会用CSS来做，因为它会自动更新并且可能更快，但是如果你愿意，你可以在JS中做到这一点：

const evenRows = document.querySelectorAll("#rateTable tr:nth-of-type(even)")
for (const row of evenRows) row.style.background = "#e7edea"

<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
<tr>
<td>Orange</td>
<td>Pink</td>
</tr>
</table>

Answer 3

尝试使用querySelectorAll和接下来迭代收到的集合来更改背景。见下文：

var trToChange = document.querySelectorAll("#rateTable tr:nth-child(even)");
for(var i = 0; i < trToChange.length; i++){
trToChange[i].style.background = "#e7edea";
}