jQuery表格增删行后新增行值显示undefined问题求助

云上老周

2026-7-7

问题分析与解决方案

你遇到的问题核心是新增行时复用了已删除行的DOM引用，或者计数逻辑没和表格实际行数同步，导致新行绑定了已删除元素的空值，所以显示undefined。

核心修正点：

新增行时，必须基于表格当前的实际行数来计算新ID，而不是依赖可能不同步的全局计数器。
删除行后，重置编号/ID时不要保留已删除行的任何引用，新增行要完全创建新的DOM节点。

修正后的代码示例：

添加行函数

function addNewRow() {
  // 获取当前表格实际行数（若要排除表头，改用$('table tr:not(:first)').length）
  const currentRowCount = $('table tr').length;
  const newRowId = `row-${currentRowCount + 1}`;
  
  // 完全创建新的行元素，绝不复用已删除节点
  const newRow = $(`
    <tr id="${newRowId}">
      <td>${currentRowCount + 1}</td>
      <td><input type="text" value="新值${currentRowCount + 1}"></td>
      <td><button class="delete-row">删除</button></td>
    </tr>
  `);
  
  $('table').append(newRow);
}

删除行与重置函数

// 用事件委托绑定删除，一次绑定即可处理所有新增行
$('table').on('click', '.delete-row', function() {
  // 删除当前行
  $(this).closest('tr').remove();
  
  // 重置所有行的编号和ID
  $('table tr').each(function(index) {
    // 从1开始计数，排除表头则把index+1改为index
    const newId = `row-${index + 1}`;
    $(this).attr('id', newId);
    $(this).find('td:first').text(index + 1);
  });
});