如何用JavaScript为动态添加的表格行设置ID？

为什么ID不生效？ #

1. DOM操作逻辑错误：insertRow()方法本身会在<tbody>里创建一个新的<tr>元素，你又在这个元素的innerHTML里嵌套了另一个<tr id="tablerow">，这属于无效HTML结构。浏览器解析时会自动修正，把内层的<tr>提取出来作为<tbody>的直接子元素，而原来通过insertRow()创建的空<tr>会被保留，导致带ID的行结构混乱，样式无法绑定。
2. 重复ID违反规范：HTML要求页面内的ID必须唯一，每次点击都生成相同的tablerow ID，浏览器只会对第一个匹配ID的元素应用样式，后续新增的行都无法触发ID选择器的样式。

正确的实现方式 #

方式一：利用insertRow()返回的行对象设置ID和内容

这种方式更符合表格DOM操作规范，同时保证ID唯一：

// 用计数器生成唯一ID
let rowIndex = 0;
function add() {
  // 创建新行并获取引用
  const newRow = document.getElementById("tbody").insertRow();
  // 设置唯一ID
  newRow.id = `tablerow-${rowIndex++}`;
  // 添加样式类（推荐用类代替重复ID统一控制样式）
  newRow.classList.add("tablerow");
  // 设置行内内容
  newRow.innerHTML = `
    <td>Table row</td>
  `;
}

对应的CSS修改为类选择器（避免ID重复问题）：

#add {
  cursor: pointer;
}

.tablerow {
  background: #f00;
}

方式二：直接向<tbody>插入HTML字符串

如果习惯用HTML字符串拼接，记得生成唯一ID：

let rowIndex = 0;
function add() {
  const tbody = document.getElementById("tbody");
  tbody.innerHTML += `
    <tr id="tablerow-${rowIndex++}" class="tablerow">
      <td>Table row</td>
    </tr>
  `;
}

HTML部分保持不变即可。

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