我正在构建一个需要多个可选输入的表单,我所拥有的基本就是这样:
表单示例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动态添加行
发布评论