动态HTML表格行生成时无法分配唯一动态ID的问题求助

• 核心错误是ID赋值逻辑的位置完全不对：你把遍历0-99的循环写在了单元格生成的遍历里，每生成一个单元格，都会把当前行的ID从tableID0到tableID99覆盖赋值100次，最后一次赋值固定为tableID99，所以所有行的最终ID都是这个值。你控制台打印的是赋值过程中的中间值，不是行最终的ID。
• 不需要额外写0-99的循环，你是遍历用户列表生成行，直接用遍历用户时的索引作为ID后缀即可。
• 额外小问题：你在表头单元格遍历中重复调用table.appendChild(headerRow)，会导致表头行被重复添加到表格里，只需要在表头遍历完成后添加一次即可。

function showTable() {
  // 从本地存储取用户数据
  let localStorageData = JSON.parse(localStorage.getItem("users"))

  // 获取表格容器
  let createTable = document.querySelector("#table")

  // 表头字段
  let headers = ["ID", "用户名", "邮箱", "密码", "用户角色", "名", "姓", "出生日期", "地址", "门牌号", "邮编", "城市", "国家", "是否封禁"]

  // 初始化表格元素
  let table = document.createElement("table");
  let headerRow = document.createElement("tr");
  
  // 生成表头
  headers.forEach(headerText => {
    let header = document.createElement("th");
    let textNode = document.createTextNode(headerText);
    header.appendChild(textNode);
    headerRow.appendChild(header);
  });
  // 表头生成完成后仅添加一次
  table.appendChild(headerRow)

  // 遍历用户生成行，用forEach的第二个参数index作为ID后缀
  localStorageData.forEach((user, index) => {
    blokkeerButtons()
    let row = document.createElement("tr");
    // 仅赋值一次ID即可
    row.id = "tableID" + index

    // 遍历用户属性生成单元格
    Object.values(user).forEach(val => {
      let cell = document.createElement("td");
      let textNode = document.createTextNode(val);
      cell.appendChild(textNode);
      row.appendChild(cell);
    });

    table.appendChild(row);
  });
  createTable.appendChild(table);
}

• 如果后续有新增用户的需求，新行的ID可以取当前表格已有行的长度作为后缀，避免ID重复。
• 不要使用var声明循环变量，var存在变量提升问题，建议统一用let/const。

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