AJAX加载JSON数据生成表格后，点击编辑按钮无法正确获取对应行数据

嘿，我之前也踩过这个坑！你现在遇到的“点击任何编辑按钮都只显示第3位员工编号”的问题，本质是循环中变量绑定的经典陷阱——当你在循环里给按钮绑定点击事件时，事件函数里引用的索引变量（比如i）在事件触发时，已经变成了循环结束后的最终值，所以不管点哪个按钮，都会拿到最后一行的数据。

问题根源分析 #

假设你原来的脚本大概是这样的（用var声明循环变量）：

// 加载JSON数据后遍历生成表格
var employees = [/* 你的JSON数据 */];
for(var i = 0; i < employees.length; i++){
  var row = document.createElement('tr');
  // 生成员工信息单元格...
  var editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  // 这里的问题：点击事件触发时，i已经是循环结束后的最后一个值
  editBtn.onclick = function(){
    document.querySelector('p').textContent = '员工编号：' + employees[i].id;
  }
  row.appendChild(editBtn);
  document.querySelector('table').appendChild(row);
}

因为var声明的变量是函数级作用域，循环里的所有i其实都是同一个变量。当你点击按钮时，循环早就跑完了，i已经等于employees.length（如果是3个员工，i就是3，而employees[2]是第3位员工，这就是为什么总是显示它的编号）。

几种修复方案 #

方案1：用let代替var（最简洁）

let是ES6新增的块级作用域变量，每次循环都会创建一个独立的i变量，这样每个按钮的点击事件都会绑定当前循环的i值：

for(let i = 0; i < employees.length; i++){
  var row = document.createElement('tr');
  // 生成单元格...
  var editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  editBtn.onclick = function(){
    document.querySelector('p').textContent = '员工编号：' + employees[i].id;
  }
  row.appendChild(editBtn);
  document.querySelector('table').appendChild(row);
}

方案2：用立即执行函数（IIFE）保存当前索引

如果需要兼容ES6之前的环境，可以用立即执行函数把当前的i值封装起来，创建独立的作用域：

for(var i = 0; i < employees.length; i++){
  var row = document.createElement('tr');
  // 生成单元格...
  var editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  // 用IIFE把当前i作为参数传入，锁定值
  (function(index){
    editBtn.onclick = function(){
      document.querySelector('p').textContent = '员工编号：' + employees[index].id;
    }
  })(i);
  row.appendChild(editBtn);
  document.querySelector('table').appendChild(row);
}

方案3：用forEach遍历数组（更直观）

直接用数组的forEach方法，它的回调函数会为每个元素创建独立的作用域，直接拿当前员工对象即可：

employees.forEach(function(emp){
  var row = document.createElement('tr');
  // 生成单元格，比如添加emp.id、emp.name等
  row.innerHTML = `<td>${emp.id}</td><td>${emp.name}</td>`;
  var editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  editBtn.onclick = function(){
    // 直接使用当前循环的emp对象，不会有变量共享问题
    document.querySelector('p').textContent = `员工编号：${emp.id}，姓名：${emp.name}`;
  }
  row.appendChild(editBtn);
  document.querySelector('table').appendChild(row);
});

方案4：用自定义属性存储数据

还可以把员工数据存在按钮的dataset自定义属性里，点击时直接从按钮上获取，这种方式更灵活：

employees.forEach(function(emp){
  var row = document.createElement('tr');
  row.innerHTML = `<td>${emp.id}</td><td>${emp.name}</td>`;
  var editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  // 把员工数据存在按钮的dataset属性中
  editBtn.dataset.empId = emp.id;
  editBtn.dataset.empName = emp.name;
  editBtn.onclick = function(){
    // 通过this.dataset获取对应数据
    var empId = this.dataset.empId;
    var empName = this.dataset.empName;
    document.querySelector('p').textContent = `员工编号：${empId}，姓名：${empName}`;
  }
  row.appendChild(editBtn);
  document.querySelector('table').appendChild(row);
});

总结 #

核心思路就是要让每个按钮的点击事件都能绑定到对应行的独立数据或索引，避免循环变量被共享的问题。上面几种方案都能解决你的问题，选最适合你代码风格的就行～

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