Question

我有一张表格，为了这个论坛我已经简化了：

<form id="data0">
    <input id="name0" />
    <input id="address0" />
</form>

使用jQuery我需要克隆（），然后将克隆表单的id更改为name1，address1等。

有没有办法在不改变它们的情况下这样做：

$('#data0').children('#name0').attr('id', 'name1');

像循环所有输入并更改＆＃39; 0＆＃39;到＆＃39; 1。＆＃39;感谢。

Answer 1

您将首先使用jQuery中的.clone() api来克隆表单#data0。然后迭代表单内的input元素，替换id并清除值，包括表单id。之后，将新表格放入正文。因此，当您单击添加按钮时，您应该有一个用于递增表单ID的计数器。

以下示例使用data0表单作为克隆新表单的基础。

HTML

<input type="button" value="Add form" id="addBtn"/>

<form id="data0">
    <input id="name0" />
    <input id="address0" />
</form>

的JavaScript

function ReplaceID(element, suffix) {
 var newId = $(element).attr('id').replace(/0/,suffix);
 $(element).attr('id', newId);
 $(element).val(newId); // for demo use, change to '' to reset value
}
var formNewId = 1;
$("#addBtn").on('click', function(){
    var newForm = $("#data0").clone();
    $('input', newForm).each(function(index,element){ // iterate input element inside the form
        ReplaceID(this, formNewId); // replace id

    }); 
    ReplaceID(newForm, formNewId); // replace the id of cloned form
    $("body").append(newForm);
    formNewId++;
});

工作示例：http://jsfiddle.net/TfDUE/1/

Answer 2

像这个例子一样使用：

<form id="old">
    <textarea>Some Value</textarea>
    <input type="text" value="Some Value" />
    <input type="checkbox" value="bob" checked />
    <br />
</form>

<input type="button" value="Clone" id="clone" />

这个jQuery有效，包括textareas：

$( 'input#clone' ).click(
    function()
    {
      $( 'form#old textarea' ).text( $( 'form#old textarea' ).val() )
      $("form#old").clone().attr( 'id', 'new_form' ).appendTo("body")

    }

  );

Answer 3

这是解决方案，只需取出console.log和alert：

$(":input").each(function() { //get all inputs

newId = $(this).attr('id');

   $(this).attr('id', newId.replace('0', '1')); 
    console.log($(this).attr('id'));
    alert($(this).attr('id'));
});

http://jsfiddle.net/yKZPK/

需要在HTML表单中迭代id并更改值

3 个答案: