更改表的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与nth-child pseudo-class完成。

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

尝试使用querySelectorAll旁边叠代收到收集改变的背景。见下：

var trToChange = document.querySelectorAll("#rateTable tr:nth-child(even)"); 

for(var i = 0; i < trToChange.length; i++){ 
    trToChange[i].style.background = "#e7edea"; 
} 

Answer 3

您可以#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>