JavaScript实现HTML表格动态新增行ID自动递增的方法

你的代码存在3处核心逻辑错误，导致ID无法正常递增：

• 单元格选取错误：通过lastRow.cells[lastRow.cells.length -1]取到的是每行最后一列的Name单元格，并非存储ID的第一列单元格
• 取值属性错误：lastCell.id读取的是DOM元素的id属性，你编写的<td>标签未设置过该属性，默认值为空字符串，做自增运算时会被强制转换为数字0，因此每次新增都显示0
• 取值逻辑错误：没有读取ID单元格内实际存储的文本数值，无法获取上一行的真实ID做递增计算

另外原表格代码存在标签闭合错误，且缺少代码中依赖的id="myTable"标识、tbody标签，会直接导致代码运行报错。

修正后完整代码 #

表格结构 #

<table id="myTable">
  <thead>
    <tr>
       <th>ID</th>
       <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>John</td>
    </tr>
  </tbody>
</table>

新增行函数 #

function newRow() {
  const tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
  const lastRow = tbodyRef.rows[tbodyRef.rows.length - 1];
  // 读取第一列（索引0）ID单元格的文本内容，转为十进制整数
  const lastId = parseInt(lastRow.cells[0].textContent.trim(), 10);

  // 插入新行
  const newRow = tbodyRef.insertRow();
  
  // 写入ID列，值为上一行ID+1
  const idCell = newRow.insertCell();
  idCell.textContent = lastId + 1;
  // 写入姓名列
  const nameCell = newRow.insertCell();
  nameCell.textContent = "Alex";
}

关键改动说明 #

• 修正单元格索引：ID列是每行第一个单元格，索引为0，不再错误选取最后一列
• 修正取值逻辑：直接读取ID单元格内的文本内容转成数值，不再读取DOM元素本身不存在的id属性
• 用textContent替代innerHTML写入纯文本，避免不必要的HTML解析，同时防范XSS风险
• 补全表格缺失的结构标签，修正原HTML的标签闭合错误，保证DOM查找逻辑能正常运行

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