如何为JavaScript动态生成的HTML表单字段添加自增id属性

实现方案 #

你需要调整模板生成逻辑，每次新增字段时动态替换id的序号值，具体修改如下： #

第一步：修改初始HTML，给默认字段加id

<label style="margin-top:70px;">Credits</label>
<div class="field_wrapper">
    <div class="form-group">
      <table width='100%'>
        <tr>
          <td>
            <!-- 给第一个角色输入框加初始id -->
            <input type="text" name="field_name[]" value="" placeholder="Role" class='form-control' style="width:98%" id="role_1"/>
          </td>
          <td>
            <!-- 给第一个名称输入框加初始id -->
            <input type="text" name="field_name[]" value="" placeholder="Name" class='form-control' style="width:100%" id="name_1"/>
          </td>
        </tr>
      </table>
      <a href="javascript:void(0);" class="add_button" title="Add field">
        <button style='margin-top:10px; margin-bottom: 10px;' type="button" class="btn btn-success btn-sm"> + Add Role </button>
      </a>
      </div>
 </div>

第二步：修改JS逻辑，动态生成带有序id的字段

这里提供两种实现，按需选择：

方案1：序号只递增，删除字段后序号不回溯（不会出现重复id，兼容性好）

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    // 把模板改成带占位符的函数，每次调用传入序号生成对应id的字段
    const getFieldHTML = (index) => `<div>
        <table width="100%">
            <tr>
                <td>
                    <input type="text" name="field_name[]" value="" class="form-control" style="width:98%;" placeholder="Role" id="role_${index}"/>
                </td>
                <td>
                    <input type="text" name="field_name[]" value="" class="form-control" style="width:100%;" placeholder="Name" id="name_${index}"/>
                </td>
            </tr>
        </table> 
        <a href="javascript:void(0);" class="remove_button">
            <button type="button" class="btn btn-danger btn-sm" style="margin-top:10px; margin-bottom: 18px;"> - Remove </button>
        </a>
    </div>`;

    var x = 1; //Initial field counter is 1

    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){
            x++; //Increment field counter
            $(wrapper).append(getFieldHTML(x)); // 传入当前序号生成字段
        }
    });

    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

方案2：删除字段后所有id重新编号，保持序号连续

如果需要id永远是1、2、3...连续不中断，就在删除逻辑后加一段重新编号的代码：

// 删除按钮点击逻辑修改为
$(wrapper).on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
    // 重新遍历所有字段，更新id
    $('.field_wrapper .form-group, .field_wrapper > div').each(function(index){
        const num = index + 1;
        $(this).find('input[placeholder="Role"]').attr('id', `role_${num}`);
        $(this).find('input[placeholder="Name"]').attr('id', `name_${num}`);
    })
});

核心逻辑说明 #

• 把固定的字段模板改成接收序号参数的函数，每次新增时用当前计数器值动态生成id
• 初始默认字段提前设置好第一组id role_1 和 name_1
• 需要连续序号的场景，删除后遍历所有现有字段批量更新id即可

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