15. 实战：表格隔行换色与悬浮高亮

实战：表格隔行换色 + 鼠标悬浮高亮。用 JS 动态给表格加样式。

核心三步：
① 遍历 tr——偶数行加背景色
② mouseover——悬浮高亮当前行
③ mouseout——移开恢复

坑：隔行换色 CSS 也能做（nth-child）、JS 做是为了理解事件、hover 用 CSS 更简单。

15.1 实战（鼠标悬浮每行试试）

点任意一行： 读出三个格子， 下面同步代码与结论。

15.2 核心代码拆解

① 隔行换色：i % 2 分奇偶

就像排队报数，奇数报灰、偶数报白，看起来就是斑马纹。

// 取出表格里所有行
let trList = document.querySelectorAll('#tb tr');

// 一行一行循环
for (let i = 0; i < trList.length; i++) {
  // 下标 1、3、5（视觉上第 2、4、6 行）上浅灰
  // 奇数行上灰
  if (i % 2 === 1) trList[i].style.backgroundColor = '#eee';
}

② 悬浮高亮 + 移出还原原色

关键：移出去不能写死颜色，得看它原本是奇数行还是偶数行再还原，否则斑马纹就乱了。用不冒泡的 mouseenter/mouseleave。

// 鼠标移进这行
trList[i].addEventListener('mouseenter', function () {
  // 移进来变黄高亮
  this.style.backgroundColor = '#ffd';
});

// 鼠标移出这行
trList[i].addEventListener('mouseleave', function () {
  // 还原：先知道这行是几号，奇数回灰、偶数回白
  // 查这行是第几号
  let idx = Array.from(trList).indexOf(this);

  // 按奇偶还原原色
  this.style.backgroundColor = (idx % 2 === 1) ? '#eee' : '#fff';
});

如果你用 mouseover 做悬浮，鼠标移到行里的小单元格上会反复闪。因为 mouseover 会冒泡，进出单元格都算"移出/移入"整行；所以行高亮要用不冒泡的 mouseenter/mouseleave。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：后台表格、成绩表、商品列表的斑马纹与悬浮高亮。

② 常见坑：移出时写死颜色，斑马纹全乱；用 mouseover 反复闪。

③ 怎么解决：移出按下标奇偶还原原色；用 mouseenter/leave 做悬浮。

本页重点