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

把前面学的串起来：取出所有行 → 循环用 i%2 给奇偶行上不同色 → 鼠标移进来高亮、移出去按奇偶还原。这就是真实项目里"斑马纹表格"的完整写法。

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

学号	姓名	成绩
1	小明	90
2	小红	85
3	小刚	78
4	小丽	92
5	小强	88
6	小芳	76

鼠标移进移出每一行，看高亮和还原。

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 做悬浮。

一句话记住：取所有行→循环 i%2 上斑马纹→mouseenter 亮、mouseleave 按下标奇偶还原。