如何使用JavaScript实现表格单元格背景颜色依次切换功能？

示例HTML结构 #

假设你的基础HTML如下（已有类似结构可直接复用）：

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>
<button id="toggleBtn">切换高亮</button>

原生JavaScript实现代码 #

// 获取核心元素
const toggleBtn = document.getElementById('toggleBtn');
const tableCells = document.querySelectorAll('td');
let activeIndex = -1; // 初始无高亮单元格

toggleBtn.addEventListener('click', () => {
  // 恢复上一个高亮单元格的背景色
  if (activeIndex !== -1) {
    tableCells[activeIndex].style.backgroundColor = '#ffffff';
  }

  // 更新当前高亮索引
  activeIndex++;
  // 到达最后一个单元格后停止（若需循环，可替换为 activeIndex = (activeIndex + 1) % tableCells.length）
  if (activeIndex >= tableCells.length) {
    activeIndex = -1;
    return;
  }

  // 设置当前单元格为红色背景
  tableCells[activeIndex].style.backgroundColor = '#ff0000';
});

代码说明 #

• 使用document.querySelectorAll('td')获取所有表格单元格，返回的NodeList支持下标访问
• 用activeIndex变量追踪当前高亮的单元格位置，初始值-1表示无激活状态
• 每次点击按钮时，先重置上一个激活单元格的背景色，再更新索引并设置新单元格的红色背景
• 若需要循环高亮（最后一个单元格之后回到第一个），将索引更新逻辑替换为activeIndex = (activeIndex + 1) % tableCells.length即可

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