我正在构建一个需要多个可选输入的表单,我所拥有的基本上是这样的:
I'm building a form where I need multiple optional inputs, what I have is basically this:
每次用户按下加号按钮时,都应将新的表单输入行添加到表单中,我如何在 jQuery 中执行此操作?此外,是否可以在所有行(或仅最后一行,如果它更容易/更快)被填满时自动添加新行?这样用户就不会不需要按加号按钮.
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.
很抱歉问了这么一个基本问题,但我对 jQuery 仍然很陌生,我可以用 PHP 做到这一点,但我确信 Javascript/jQuery 在这里扮演着更合适的角色.
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.
提前致谢!
<!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 标记如下所示
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 在插入后清空文本框的值..
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 无法自拔,要重置插入的 TR 中的所有下拉列表,您可以执行此操作
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();});剩下的交给你!
更多推荐
使用 jQuery 动态添加行
发布评论