纯JavaScript实现点击表格行红色高亮及其他行白色底色重置

我完全明白你遇到的问题——把jQuery逻辑转成原生JS时，经常会因为DOM加载时机、事件绑定方式的差异导致代码失效，而且还没报错，这种情况真的很头疼。咱们先拆解你原来的jQuery逻辑，再一步步改成能正常工作的原生JS代码。

你的需求很明确：点击表格行时高亮该行，点击其他行时取消之前的高亮并高亮新行。先看你原来的jQuery代码逻辑：

$('table tr').each(function(a,b){ $(b).click(function(){ $('table tr').css('background','#ffffff'); $(this).css('background','#ff0000'); }); });

核心就是遍历所有行绑定点击事件，点击时重置所有行背景，再给当前行设红色背景。下面是两种可行的原生JS实现方案：

方案一：直接操作行样式 #

这种方式和你原来的jQuery逻辑最接近，直接修改行的style属性：

<table>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

<script>
// 等待DOM完全加载后再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有表格行元素
  const tableRows = document.querySelectorAll('table tr');
  // 记录当前被高亮的行
  let activeRow = null;

  // 给每一行绑定点击事件
  tableRows.forEach(row => {
    row.addEventListener('click', function() {
      // 如果之前有高亮的行，恢复它的背景色
      if (activeRow) {
        activeRow.style.backgroundColor = '#ffffff';
      }
      // 高亮当前点击的行
      this.style.backgroundColor = '#ff0000';
      // 更新当前高亮行的记录
      activeRow = this;
    });
  });
});
</script>

方案二：用CSS类切换（更推荐） #

把样式逻辑放到CSS里，JS只负责切换类名，这样代码更清晰，也方便后续修改样式：

<style>
/* 默认行背景 */
table tr {
  background-color: #ffffff;
  cursor: pointer; /* 加个鼠标指针提示，提升交互体验 */
}
/* 高亮样式类 */
table tr.highlighted {
  background-color: #ff0000;
}
</style>

<table>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const tableRows = document.querySelectorAll('table tr');
  let activeRow = null;

  tableRows.forEach(row => {
    row.addEventListener('click', function() {
      // 取消之前高亮行的类
      if (activeRow) {
        activeRow.classList.remove('highlighted');
      }
      // 给当前行添加高亮类
      this.classList.add('highlighted');
      activeRow = this;
    });
  });
});
</script>

为什么你之前的代码无效？ #

大概率是DOM加载时机的问题：如果你的JS代码写在<head>里，或者页面还没加载完表格就执行了JS，那document.querySelectorAll('table tr')会找不到任何元素，自然不会绑定事件，也就没有效果。用DOMContentLoaded事件就能确保代码在所有DOM元素加载完成后再执行。

另外，原生JS里遍历元素要用forEach（或者for循环），而不是jQuery的each方法，这也是容易踩的小坑。

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