使用 jQuery 动态添加行 [英] Adding rows dynamically with jQuery
问题描述
我正在构建一个需要多个可选输入的表单，我所拥有的基本上是这样的:
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="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>
推荐答案
这会让您关闭，添加按钮已从表格中删除，因此您可能需要考虑此...
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 动态添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
