JavaScript新手求助：表格行/单元格高亮功能异常，传入函数索引始终为9

嘿，我完全懂你遇到的这个问题——这是JavaScript新手很容易踩的循环变量作用域陷阱，咱们一步步拆解解决它！

为什么传入highlight的数值总是9？ #

大概率你是用了var声明循环变量来绑定点击事件，比如像这样：

// 错误示例：用var导致的作用域问题
var cells = document.querySelectorAll('table td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function() {
    highlight(i); // 这里的i永远是循环结束后的最终值，比如9
  });
}

var声明的变量是函数级作用域，整个循环里只有一个i变量。当循环结束时，i已经变成了单元格的总数（比如你说的9），等点击事件触发时，函数里引用的i就是这个最终值，而不是你期望的当前单元格的索引。

解决办法：3种方式修复作用域问题 #

1. 用let代替var（最简洁的ES6+方案）

let是块级作用域，每次循环都会创建一个独立的i变量，绑定到当前循环的单元格：

const cells = document.querySelectorAll('table td');
for (let i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function() {
    highlight(i); // 现在i是当前单元格的正确索引啦
  });
}

2. 用立即执行函数（IIFE）创建闭包（兼容旧环境）

如果需要兼容不支持ES6的环境，可以用闭包把循环变量的当前值保存下来：

var cells = document.querySelectorAll('table td');
for (var i = 0; i < cells.length; i++) {
  // 用立即执行函数把当前i的值传入，形成独立作用域
  (function(currentIndex) {
    cells[i].addEventListener('click', function() {
      highlight(currentIndex);
    });
  })(i);
}

3. 用forEach遍历（更直观的写法）

直接遍历单元格数组，forEach的回调函数会自动传入当前索引，天然避免作用域问题：

const cells = document.querySelectorAll('table td');
cells.forEach(function(cell, index) {
  cell.addEventListener('click', function() {
    highlight(index);
  });
});

补充：完善highlight函数的逻辑 #

确保高亮逻辑符合你的需求——点击首列高亮整行，点击其他单元格只高亮自身：

function highlight(index) {
  // 先移除所有已有的高亮样式
  document.querySelectorAll('table td.highlight').forEach(el => el.classList.remove('highlight'));
  document.querySelectorAll('table tr.highlight').forEach(el => el.classList.remove('highlight'));

  const cell = document.querySelectorAll('table td')[index];
  const row = cell.parentElement;

  // 判断当前单元格是否是所在行的第一个单元格
  if (cell === row.firstElementChild) {
    row.classList.add('highlight');
  } else {
    cell.classList.add('highlight');
  }
}

别忘了加一点高亮样式：

.highlight {
  background-color: #ffeb3b; /* 亮黄色高亮，可根据喜好修改 */
}

最后提醒：确保代码在DOM加载完成后执行，比如把所有代码放在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放上面的事件绑定代码
});

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