如何在JavaScript表格新增行函数中为每行添加唯一ID？

你的代码里已经定义了计数器但未实际使用，静态HTML模板也无法生成唯一ID，同时内部元素的固定ID还会导致重复（违反HTML规范），下面是修改后的完整代码：

$(document).ready(function(){
    // 定义行模板，通过占位符预留唯一标识位置
    var rowTemplate = '<tr id="row-{{rowId}}">' +
        '<td class="cb">' +
            '<input class="form-control" type="text" value="" id="inputString-{{rowId}}" name="inputString[]"/>' +
            '<div id="showList-{{rowId}}"><ul class="list-group"></ul></div>' +
        '</td>' +
        '<td><input type="checkbox" name="debit[]" class="form-control"></td>' +
        '<td><input type="checkbox" name="credit[]" class="form-control"></td>' +
        '<td><input type="number" name="amount[]" class="form-control"></td>' +
        '<td><input class="btn btn-warning remove-btn" type="button" name="remove" value="Remove"></td>' +
    '</tr>';
    
    var rowCounter = 1; // 唯一ID计数器
    
    $("#add").click(function(){
        // 替换模板中的占位符，生成带唯一ID的行HTML
        var newRow = rowTemplate.replace(/{{rowId}}/g, rowCounter);
        $("#table_field").append(newRow);
        
        // 绑定移除按钮事件
        $("#row-" + rowCounter + " .remove-btn").click(function(){
            $(this).closest("tr").remove();
        });
        
        rowCounter++; // 计数器自增，保证下一行ID唯一
    });
});

关键修改说明： #

• 唯一行ID：通过rowCounter生成row-1、row-2这类唯一ID，替换模板中的{{rowId}}占位符
• 避免内部元素ID重复：把输入框、列表容器的ID也改成带计数器的形式（如inputString-1），解决全局ID冲突问题
• 表单数据收集优化：将表单元素的name改成数组格式（如inputString[]），提交表单时能正确获取所有行的输入值
• 移除按钮事件优化：去掉固定ID和内联onclick，改用jQuery动态绑定点击事件，代码更简洁且避免重复绑定问题

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