如何将递增的 id="" 属性添加到以下 JavaScript 生成的 HTML 表单中？

Question

我设法想出了以下 JavaScript 和 HTML 但现在我被卡住了。 我希望能够向字段添加一个 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
    var fieldHTML = '<div><table width="100%"><tr><td><input type="text" 
        name="field_name[]" value="" class="form-control" style="width:98%;" 
        placeholder="Role"/></td><td><input type="text" name="field_name[]" value="" 
        class="form-control" style="width:100%;" placeholder="Name"/></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(fieldHTML); //Add field html
        }
    });

    //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
    });
});

<label style="margin-top:70px;">Credits</label>
<div class="field_wrapper">
    <div class="form-group">
      <table width='100%'>
        <tr>
          <td>
            <input type="text" name="field_name[]" value="" placeholder="Role" class='form-control' style="width:98%"/>
          </td>
          <td>
            <input type="text" name="field_name[]" value="" placeholder="Name" class='form-control' style="width:100%"/>
          </td>
        </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>

Answer 1

你可以试试这个片段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
  integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/javascript">
  $(document).ready(function () {
    var x = 1; //Initial field counter is 1
    var idCounter = 0;
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper

    function fieldHTML(id) {
      return '<div><table width="100%"><tr><td>id:' + id + '<input type="text"' +
        'id="role-' + id + '" name = "field_name[]" value = "" class="form-control" style = "width:98%;"' +
        'placeholder = "Role" /></td > <td><input type="text" id="name-' + id + '" name="field_name[]" value=""' +
        'class="form-control" style="width:100%;" placeholder="Name" /></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 >';
    }

    //Once add button is clicked
    $(addButton).click(function () {
      //Check maximum number of input fields
      if (x < maxField) {
        $(wrapper).append(fieldHTML(idCounter++)); //Add field html
        x++; //Increment field counter
      }
    });

    //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
    });
  });
</script>


<label style="margin-top:70px;">Credits</label>
<div class="field_wrapper">
  <div class="form-group">
    <table width='100%'>
      <tr>
        <td>
          <input type="text" name="field_name[]" value="" placeholder="Role" class='form-control' style="width:98%" />
        </td>
        <td>
          <input type="text" name="field_name[]" value="" placeholder="Name" class='form-control' style="width:100%" />
        </td>
    </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>

请注意，我创建了一个新变量idCounter以保持 id 的唯一性，即使您删除了一行。 否则，它可能会创建具有重复 ID 的元素。

这只是一种快速方法，但还有许多其他方法可以实现。 代码可以变得整洁和可读。