如何获取字段所在TD节点的id？解决函数循环无法输出数据的问题

嘿，我完全懂你踩的这个坑！循环里的变量作用域问题真的是前端开发者常犯的错误，尤其是处理DOM元素时，一不小心就拿不到预期的id值。

先帮你还原下大概率的场景：你可能写了类似这样的代码，结果发现循环里的TD节点id要么全是最后一个元素的，要么干脆是undefined？

// 你可能写的有问题的代码示例
const tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
  var td = tds[i];
  // 比如绑定点击事件或者异步操作
  td.addEventListener('click', function() {
    console.log(td.id); // 结果总是最后一个TD的id，或者undefined
  });
}

问题根源 #

问题出在var声明的变量上——var是函数作用域，不是块级作用域。循环里的i和td其实是同一个变量，每次循环都会覆盖它的值。当后续代码（比如点击事件的回调）执行时，循环已经跑完了，变量已经指向最后一个元素（或者超出索引变成undefined），自然拿不到当前迭代的TD的id。

3种靠谱的解决方案 #

1. 用let/const替代var（推荐）

ES6引入的let和const是块级作用域，每次循环都会创建一个新的变量绑定，相当于给每个迭代的元素单独存了一份引用：

const tds = document.querySelectorAll('td');
for (let i = 0; i < tds.length; i++) {
  const td = tds[i];
  // 同步场景直接拿id
  console.log('当前TD的id:', td.id);
  // 异步/事件回调场景也能正确获取
  td.addEventListener('click', function() {
    console.log(td.id);
  });
}

2. 使用forEach循环

forEach的回调函数会为每个元素创建独立的作用域，天然避开作用域共享的问题，代码也更简洁：

const tds = document.querySelectorAll('td');
tds.forEach(function(td) {
  console.log(td.id);
  td.addEventListener('click', function() {
    console.log(td.id);
  });
});

3. 闭包兼容旧环境（ES5及以下）

如果需要兼容不支持ES6的老浏览器，闭包可以手动创建独立作用域，把当前迭代的TD节点作为参数传递进去：

const tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
  // 立即执行函数创建闭包，保存当前TD的引用
  (function(currentTd) {
    console.log(currentTd.id);
    currentTd.addEventListener('click', function() {
      console.log(currentTd.id);
    });
  })(tds[i]);
}

额外小提醒 #

如果同步循环里还是拿不到id，先检查一下你的TD节点是不是真的有id属性！可以在循环里打印td看看是不是目标元素，或者用td.hasAttribute('id')判断一下，避免是DOM节点本身的问题。

内容的提问来源于stack exchange，提问作者I.Michael Snyder