如何使用jQuerydynamic地添加表单元素

这是我的html：

<div id="extraPerson"> <div class="controls controls-row"> <input class="span3" placeholder="First Name" type="text" name="firstname2"> <input class="span3" placeholder="Last Name" type="text" name="lastname2"> <select class="span2" name="gender2"><option value="Male">Male</option><option value="Female">Female</option></select> ...ETC </div> </div> <a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a> 

这是我的jQuery：

 <script> $(document).ready(function(){ $('#addRow').click(function(){ $("#extraPerson").slideDown(); }); }) </script> 

#extraPerson隐藏在CSS中。

它在链接被点击时添加div。 但是，我希望它每次点击链接时继续添加相同的div。 我如何做到这一点？ 如果将数字附加到表单input名称，则更好。 例如firstname3，firstname4等

Answer 1

试试这个方法：

演示

HTML

创build一个模板extraPersonTemplate并使用它进一步构build。 添加一个容器tyo你的内容部分。

 <div class="extraPersonTemplate"> <div class="controls controls-row"> <input class="span3" placeholder="First Name" type="text" name="firstname2"> <input class="span3" placeholder="Last Name" type="text" name="lastname2"> <select class="span2" name="gender2"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> </div> <div id="container"></div> 

JS

  $(document).ready(function () { $('<div/>', { 'class' : 'extraPerson', html: GetHtml() }).appendTo('#container'); //Get the html from template $('#addRow').click(function () { $('<div/>', { 'class' : 'extraPerson', html: GetHtml() }).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion. }); }) function GetHtml() //Get the template and update the input field names { var len = $('.extraPerson').length; var $html = $('.extraPersonTemplate').clone(); $html.find('[name=firstname]')[0].name="firstname" + len; $html.find('[name=lastname]')[0].name="lastname" + len; $html.find('[name=gender]')[0].name="gender" + len; return $html.html(); } 

小Css

 .extraPersonTemplate { display:none; } 

Answer 2

我想出了一个我自己的解决scheme。 大量的意见，但随意问。

 $(document).ready(function(){ $('#addRow').click(function(){ // get the last person and html html var $person = $('.person').last(); var person = $person.html(); // find the number var index = person.indexOf('firstname'); var number = parseInt(person.substring(index+9,1)); var next = number+1; // replace the number // for firstname person.replace('firstname'+number, 'firstname'+next); // for lastname person.replace('lastname'+number, 'lastname'+next); // for gender person.replace('gender'+number, 'gender'+next); // insert the new person after the last one $person.after($('<div class="person">'+person+'</div>')); // get the new person var $new = $('.person').last(); // hide it $new.hide(); // reset the values $new.find('input, select').val(''); // fade it in $new.slideDown(); }); }) 

我喜欢@PSL使用模板的事实，可能是更好的更简单的解决scheme。 请注意，您将需要添加代码来更新那里的人数…

小提琴： http : //jsfiddle.net/Mk7MQ/