用jQuery动态添加行 [英] Adding rows dynamically with jQuery
问题描述
我正在构建一个需要多个可选输入的表单，我所拥有的基本就是这样：
表单示例http://i49.tinypic.com/fcscyh.png
每次用户按下加号按钮应该在表单中添加一行新的表单输入，我怎么在jQuery中做到这一点？ 另外，是否有可能在所有行（或只是最后一行，如果它更容易/更快）被填充时自动添加新行这样用户不会我需要按加号按钮。
我很抱歉，也许有这样一个基本问题，但我仍然非常青睐jQuery，我可以用PHP来做到这一点但我确信Javascript / jQuery在这里扮演更合适的角色。
预先感谢！
@alex：
<！DOCTYPE html>
< head>
< script type =text / javascriptsrc =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 （''）; //它可以复制第一个值
$ 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 http://i49.tinypic.com/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="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 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动态添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
