我正在构建一个需要多个可选输入的表单，我所拥有的基本就是这样：
表单示例i49.tinypic/fcscyh.png
每次用户按下加号按钮应该在表单中添加一行新的表单输入，我怎么在jQuery中做到这一点？ 另外，是否有可能在所有行（或只是最后一行，如果它更容易/更快）被填充时自动添加新行这样用户不会我需要按加号按钮。
我很抱歉，也许有这样一个基本问题，但我仍然非常青睐jQuery，我可以用PHP来做到这一点但我确信Javascript / jQuery在这里扮演更合适的角色。
预先感谢！
@alex： <！DOCTYPE html> < head> < script type =text / javascriptsrc =ajax.googleapis/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 （''）; //它可以复制第一个值 $ justInserted.slideDown（500）; }）; < / script> < / head> < body> < form id =personasname =personasmethod =postaction => < table width =300border =1cellspacing =0cellpadding =2> < tr> < td>名称< / td> < td>更多？< / td> < / tr> < tr class =person> < td>< input type =textname =name []id =name []/>< / td> < td>< a href =＃id =add> +< / a>< / td> < / tr> < / table> < / form> < / body> < / html>解决方案
这会让你关闭，添加按钮已经从表格中删除，以便您可以考虑这一点...
< 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 =mytablewidth =300border =1cellspacing =0cellpadding =2> < tbody> < tr> < td>名称< / td> < / tr> < tr class =person> < td>< input type =textname =nameid =name/>< / td> < / tr> < / tbody> < / table>编辑插入后清空文本框的值。 p>
$（'＃mytable tbody> tr：last'）。clone（true）.insertAfter（'＃mytable tbody> tr：last ）; $（'＃mytable tbody> tr：last #name'）。val（''）; 返回false;EDIT2 无法自己重置所有的下拉列表插入TR你可以做到这一点
$（＃mytable tbody> tr：last）each（function（）{this 。重启（）;}）;我会把剩下的给你！
I'm building a form where I need multiple optional inputs, what I have is basically this:
form example i49.tinypic/fcscyh.png
Every time a user presses the plus button a new row of form inputs should be added to the form, how can I do this in jQuery? Also, is it possible to automatically add a new row when all rows (or just the last row, if it's easier / faster) are filled? That way the user wouldn't need to press the plus button.
I'm sorry for asking maybe such a basic question but I'm still very green with jQuery, I could do this with PHP but I'm sure Javascript / jQuery plays a more appropriate role here.
Thanks in advance!
@alex: <!DOCTYPE html> <head> <script type="text/javascript" src="ajax.googleapis/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>解决方案
This will get you close, the add button has been removed out of the table so you might want to consider this...
<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 markup looks like this
<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>EDIT To empty a value of a textbox after insert..
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); $('#mytable tbody>tr:last #name').val(''); return false;EDIT2 Couldn't help myself, to reset all dropdown lists in the inserted TR you can do this
$("#mytable tbody>tr:last").each(function() {this.reset();});I will leave the rest to you!
更多推荐
用jQuery动态添加行
发布评论