如何使用JavaScript更新所有表格偶数行的样式？

你代码失效的原因很简单：document.querySelectorAll()返回的是多个元素组成的NodeList集合，不是单个DOM元素，没法直接通过.style属性批量修改样式，得挨个处理集合里的每一行。

两种可行的JS实现方法 #

• 用forEach遍历（现代浏览器支持）

function col() {
  document.querySelectorAll("tr:nth-child(even)").forEach(tr => {
    tr.style.backgroundColor = "#f2f2f2"; // 替换成你需要的颜色
  });
}

• 传统for循环（兼容旧浏览器）

function col() {
  const evenRows = document.querySelectorAll("tr:nth-child(even)");
  for (let i = 0; i < evenRows.length; i++) {
    evenRows[i].style.backgroundColor = "#f2f2f2";
  }
}

更优方案：直接用CSS #

其实没必要用JS来做，用CSS就能直接实现偶数行着色，代码更简洁性能也更好：

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

内容的提问来源于stack exchange，提问作者varghese