点击“Add Row”按钮后如何为动态表格输入字段生成唯一ID？

你的问题出在克隆行时仅清空了输入值、修改了行序号和行ID，但没有修改输入框的ID属性，导致所有行的输入框ID重复，表单提交时数据冲突。

修改思路：在克隆行后，遍历该行所有输入框，基于原ID加上当前行的递增编号，确保每个输入框ID唯一。同时修正行ID的编号逻辑，避免行ID重复。

以下是修改后的完整代码：

$(document).ready(function(){
  $("#add").on('click', function(e) {
      // 获取最后一行的序号，转成数字
      var lastRowNum = +$('#table tbody tr:last td:first').text();
      // 新行的序号
      var newRowNum = lastRowNum + 1;
      
      var clonedRow = $('#table tbody tr:last').clone()
              // 修改新行的序号文本
              .find('td:first').text(newRowNum).closest('tr')
              // 设置新行的ID，用新行序号避免重复
              .attr('id', 'addr' + newRowNum)
              // 遍历所有输入框，修改ID并清空值
              .find('input').each(function() {
                  var originalId = $(this).attr('id');
                  // 在原ID后加上新行序号作为后缀，保证唯一
                  $(this).attr('id', `${originalId}-${newRowNum}`).val('');
              }).closest('tr');
    
      $('#table tbody').append(clonedRow);
  });

  $('#table').on('click', '.btn', function(e) {
      if ($(this).closest('tr').siblings().length > 0) {
          $(this).closest('tr').remove();
      }
  });
});

关键修改点说明： #

• 修正行ID逻辑：原代码用旧行序号设置新行ID，会导致行ID重复，现在改为用新行序号生成行ID。
• 遍历输入框修改ID：通过each遍历每行的所有输入框，在原ID后拼接-新行序号，比如原输入框ID为username，第二行的就变成username-2，第三行是username-3，以此类推，确保每个输入框ID唯一。

如果你的输入框原ID本身带有数字（比如field1、field2），可以替换成更精准的逻辑，比如提取原ID的前缀再拼接行号：

// 示例：原ID为field1、field2...，替换数字部分为新行序号
var originalId = $(this).attr('id');
var idPrefix = originalId.replace(/\d+$/, ''); // 提取前缀，比如field
$(this).attr('id', `${idPrefix}${newRowNum}`).val('');

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