动态生成表格行后，无法通过ID获取对应数据的技术咨询

哦，我一眼就看出问题所在啦！你这段代码的核心bug是重复使用了相同的ID——HTML规范里明确要求页面上的ID必须是唯一的，可你在循环生成表格行时，每个<td>都用了tdusername、tdfullname这类固定ID，结果页面上会出现N个完全相同的ID元素。这时候用getElementById去获取数据，只会拿到第一个匹配的元素，自然取不到对应行的目标数据啦！

下面给你几个实用的解决方案，按需选择：

方案1：用Class替代ID，通过父元素定位（最灵活） #

把所有重复的ID改成Class，然后通过行元素<tr>来定位当前行的对应数据，避免全局冲突：

修改生成代码 #

if(xmlhttp.status == 200) { 
  var adminList = xmlhttp.responseJSON; 
  var outputStr = ''; 
  for(var i = 0; i < adminList.length; i++) { 
    // 把id改成class
    outputStr += '<tr><td class="tdusername">' + adminList[i].username + '</td>' +
                '<td class="tdfullname">' + adminList[i].fullName + '</td>' +
                '<td class="tdemail">'+ adminList[i].email+'</td>' +
                '<td class="tdedit" data-id="'+adminList[i].id+'">编辑</td>...</tr>'; 
  }
  // 把outputStr插入到表格中
  document.getElementById('your-table-id').innerHTML = outputStr;
}

获取对应行数据的示例（比如点击编辑按钮时） #

// 给表格绑定事件委托，避免重复绑定
document.getElementById('your-table-id').addEventListener('click', function(e) {
  const editBtn = e.target.closest('.tdedit');
  if(editBtn) {
    // 拿到当前行的<tr>元素
    const currentRow = editBtn.closest('tr');
    // 从当前行里获取对应数据
    const username = currentRow.querySelector('.tdusername').textContent;
    const fullName = currentRow.querySelector('.tdfullname').textContent;
    const email = currentRow.querySelector('.tdemail').textContent;
    const userId = editBtn.dataset.id; // 直接从data属性拿ID更方便
    
    // 这里就可以用拿到的数据做后续操作啦
    console.log('当前选中用户:', {userId, username, fullName, email});
  }
});

方案2：给每个元素生成唯一ID #

如果一定要用ID，可以在ID后面拼接循环索引，确保每个元素ID唯一：

修改生成代码 #

if(xmlhttp.status == 200) { 
  var adminList = xmlhttp.responseJSON; 
  var outputStr = ''; 
  for(var i = 0; i < adminList.length; i++) { 
    // 给ID加上索引后缀，保证唯一
    outputStr += '<tr><td id="tdusername-' + i + '">' + adminList[i].username + '</td>' +
                '<td id="tdfullname-' + i + '">' + adminList[i].fullName + '</td>' +
                '<td id="tdemail-' + i + '">'+ adminList[i].email+'</td>' +
                '<td id="tdedit-' + i + '" onclick="handleEdit(' + i + ')">编辑</td>...</tr>'; 
  }
}

获取数据的函数 #

function handleEdit(index) {
  const username = document.getElementById('tdusername-' + index).textContent;
  const fullName = document.getElementById('tdfullname-' + index).textContent;
  const email = document.getElementById('tdemail-' + index).textContent;
  const userId = adminList[index].id; // 直接从原数组拿也可以
  
  console.log('选中用户数据:', {userId, username, fullName, email});
}

方案3：直接创建DOM元素并绑定事件（最清晰） #

放弃字符串拼接，直接用DOM API创建元素，同时给操作按钮绑定事件，直接传入当前行的数据，彻底避免ID/Class的麻烦：

if(xmlhttp.status == 200) { 
  var adminList = xmlhttp.responseJSON; 
  const table = document.getElementById('your-table-id');
  
  // 清空原有内容
  table.innerHTML = '';
  
  // 注意这里用let，避免循环变量闭包问题
  for(let i = 0; i < adminList.length; i++) { 
    const user = adminList[i];
    
    // 创建行元素
    const row = document.createElement('tr');
    
    // 创建每个单元格
    const usernameTd = document.createElement('td');
    usernameTd.textContent = user.username;
    
    const fullNameTd = document.createElement('td');
    fullNameTd.textContent = user.fullName;
    
    const emailTd = document.createElement('td');
    emailTd.textContent = user.email;
    
    const editTd = document.createElement('td');
    editTd.textContent = '编辑';
    
    // 直接绑定点击事件，当前用户数据直接可用
    editTd.addEventListener('click', function() {
      console.log('当前选中用户:', user);
      // 这里可以直接用user.id、user.username等数据
    });
    
    // 把单元格添加到行，行添加到表格
    row.appendChild(usernameTd);
    row.appendChild(fullNameTd);
    row.appendChild(emailTd);
    row.appendChild(editTd);
    table.appendChild(row);
  }
}

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