Question

我有一个表单，我需要动态添加按钮click.Html动态添加单击按钮，但我需要更改动态添加元素的 id 值。

Js代码

   $(function () {
    $('.click').on('click', function () {

        $('#mytable tbody tr').clone(true).insertAfter('#mytable tbody');

    });

});

我需要<input type="text" id="name_1" />为每个文本框的id属性添加增量值。有什么想法吗？

Answer 1

如果您想在添加时更改每个文本框的ID，请尝试以下操作：

// Code goes here
$(function(){
  var unique_id=0
  $('.click').on('click',function(){
    unique_id++
    $('#mytable tbody tr').clone(true).insertAfter('#mytable tbody')
      .find("input")
        .each(function(){
          $(this).attr("id",$(this).attr("id")+"_"+(unique_id))
        })

  });

});

分叉您的Plunker：http://plnkr.co/edit/R6qvaZ2m2Kt2DEGL3SWF?p=preview

注意：此表单数据无法正确提交，因为这些字段没有任何名称值。如果您打算允许自然提交表单，而不是依赖JS，您可以尝试以下方法：

<input type="text" name="name[]" />
<input type="text" name="age[]" />
<input type="text" name="salary[]" />

...在这种情况下，您完全可以复制输入字段，而不必为每个字段赋予唯一ID。

Answer 2

您可以使用以下命令更改id属性：

$(selector).attr('id', 'new-id-here');

Answer 3

我认为你需要在插入之前更改克隆元素的ID吗？您可以尝试在这个可能类似的问题上发布的答案：How to JQuery clone() and change id

var c = 0;
$("button").on('click',function(){
  var klon = $( '#id'+ c );
  klon.clone().attr('id', 'id'+(++c) ).insertAfter( klon );
});

jsfiddle here

动态更改id属性值

3 个答案: