Question

我知道如何使用jquery执行此操作：

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

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

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。可以使用nth-child pseudo-class在纯CSS中完成。

＆＃13;

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

＆＃13;

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

＆＃13;

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中做到这一点：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: