更改表的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>