用jQuerydynamic添加行
我正在build立一个表单，我需要多个可选的input，我基本上是这样的：
表单示例http://i49.tinypic.com/fcscyh.png
每次用户按下加号button时，表单input的新行应该被添加到表单，我怎么能在jQuery中做到这一点？ 另外，当所有的行 （或只是最后一行，如果更容易/更快） 被填满 ，是否可以自动添加一个新的行 ？ 这样用户不需要按加号button。
我很抱歉，也许这样一个基本的问题，但我仍然非常绿色与jQuery，我可以用PHP做到这一点，但我相信JavaScript / jQuery在这里扮演一个更合适的angular色。
提前致谢！
@alex：
<!DOCTYPE html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $form = $('#personas'); $rows = $form.find('.person'); $('a#add').click(function() { $rows.find(':first').clone().insertAfter($rows.find(':last')); $justInserted = $rows.find(':last'); $justInserted.hide(); $justInserted.find('input').val(''); // it may copy values from first one $justInserted.slideDown(500); }); </script> </head> <body> <form id="personas" name="personas" method="post" action=""> <table width="300" border="1" cellspacing="0" cellpadding="2"> <tr> <td>Name</td> <td>More?</td> </tr> <tr class="person"> <td><input type="text" name="name[]" id="name[]" /></td> <td><a href="#" id="add">+</a></td> </tr> </table> </form> </body> </html> 这会让你closures，添加button已经从表格中删除，所以你可能要考虑这个…
<script type="text/javascript"> $(document).ready(function() { $("#add").click(function() { $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); return false; }); }); </script>
HTML标记看起来像这样
<a id="add">+</a></td> <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2"> <tbody> <tr> <td>Name</td> </tr> <tr class="person"> <td><input type="text" name="name" id="name" /></td> </tr> </tbody> </table>
编辑要插入后清空文本框的值
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); $('#mytable tbody>tr:last #name').val(''); return false;
编辑2无法自拔 ，重置所有插入TR中的下拉列表，你可以做到这一点
$("#mytable tbody>tr:last").each(function() {this.reset();});
我会把剩下的给你！
除了上面的答案之外，您可能需要更改input元素的名称/ ID（请注意，字段名称中不应包含数字）：
<input name="someStuff.entry[2].fieldOne" id="someStuff_fdf_fieldOne_2" ..>
我已经做了这个有一些全局variables默认设置为0：
var globalNewIndex = 0;
并在克隆和重置新行中的值后添加函数：
var newIndex = globalNewIndex+1; var changeIds = function(i, val) { return val.replace(globalNewIndex,newIndex); } $('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds ); globalNewIndex++;
未经testing。 修改以适应：
$form = $('#my-form'); $rows = $form.find('.person-input-row'); $('button#add-new').click(function() { $rows.find(':first').clone().insertAfter($rows.find(':last')); $justInserted = $rows.find(':last'); $justInserted.hide(); $justInserted.find('input').val(''); // it may copy values from first one $justInserted.slideDown(500); });
这比复制innerHTML好，因为你会失去所有附加的事件等。
我试过这样的东西，它的作品很好，
这是html部分：
<table class="dd" width="100%" id="data"> <tr> <td>Year</td> <td>:</td> <td><select name="year1" id="year1" > <option value="2012">2012</option> <option value="2011">2011</option> </select></td> <td>Month</td> <td>:</td> <td width="17%"><select name="month1" id="month1"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select></td> <td width="7%">Week</td> <td width="3%">:</td> <td width="17%"><select name="week1" id="week1" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></td> <td width="8%"> </td> <td colspan="2"> </td> </tr> <tr> <td>Actual</td> <td>:</td> <td width="17%"><input name="actual1" id="actual1" type="text" /></td> <td width="7%">Max</td> <td width="3%">:</td> <td><input name="max1" id="max1" type="text" /></td> <td>Target</td> <td>:</td> <td><input name="target1" id="target1" type="text" /></td> </tr>
这是Javascript的一部分;
<script src="jquery-latest.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { var currentItem = 1; $('#addnew').click(function(){ currentItem++; $('#items').val(currentItem); var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year'+currentItem+'" id="year'+currentItem+'" ><option value="2012">2012</option><option value="2011">2011</option></select></td><td>Month</td><td>:</td><td width="17%"><select name="month'+currentItem+'" id="month'+currentItem+'"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week'+currentItem+'" id="week'+currentItem+'" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%"></td><td colspan="2"></td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual'+currentItem+'" id="actual'+currentItem+'" type="text" /></td><td width="7%">Max</td> <td width="3%">:</td><td><input name="max'+currentItem+'" id ="max'+currentItem+'"type="text" /></td><td>Target</td><td>:</td><td><input name="target'+currentItem+'" id="target'+currentItem+'" type="text" /></td></tr>'; $('#data').append(strToAdd); }); }); //]]> </script>
Finaly PHP提交部分：
for( $i = 1; $i <= $count; $i++ ) { $year = $_POST['year'.$i]; $month = $_POST['month'.$i]; $week = $_POST['week'.$i]; $actual = $_POST['actual'.$i]; $max = $_POST['max'.$i]; $target = $_POST['target'.$i]; $extreme = $_POST['extreme'.$i]; $que = "insert INTO table_name(id,year,month,week,actual,max,target) VALUES ('".$_POST['type']."','".$year."','".$month."','".$week."','".$actual."','".$max."','".$target."')"; mysql_query($que); }
你可以通过Dynamic table row inserterfind更多的细节
基于其他答案，我简化了一些东西。 通过克隆最后一个元素，我们可以免费获得“添加新的”button（由于克隆，您必须将ID更改为一个类），并减lessDOM操作。 我不得不使用filter（）而不是find（）来获取最后一个元素。
$('.js-addNew').on('click', function(e) { e.preventDefault(); var $rows = $('.person'), $last = $rows.filter(':last'), $newRow = $last.clone().insertAfter($last); $last.find($('.js-addNew')).remove(); // remove old button $newRow.hide().find('input').val(''); $newRow.slideDown(500); });
