Ali*_*xel 60 html javascript forms jquery
我正在构建一个我需要多个可选输入的表单,我所拥有的基本上是这样的:
形式示例http://i49.tinypic.com/fcscyh.png
每次用户按下加号按钮时,都应该在表单中添加一行新的表单输入,如何在jQuery中执行此操作？此外,当所有行(或者只是最后一行,如果它更容易/更快)被填充时,是否可以自动添加新行？这样用户就不需要按加号按钮了.
我很抱歉可能会问这样一个基本的问题,但我对jQuery仍然非常环保,我可以用PHP做到这一点,但我确信Javascript/jQuery在这里扮演一个更合适的角色.
提前致谢!
<!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>
Rip*_*ppo 60
这会让你关闭,添加按钮已从表中删除,所以你可能想要考虑这个...
<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="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>
编辑在插入后清空文本框的值.
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
$('#mytable tbody>tr:last #name').val('');
return false;
EDIT2无法帮助自己,要重置插入的TR中的所有下拉列表,您可以执行此操作
$("#mytable tbody>tr:last").each(function() {this.reset();});
我会把剩下的留给你!
作为上述答案的补充:您可能需要更改输入元素的名称/ ID中的ID(请注意,您不应在字段名称中包含数字):
<input name="someStuff.entry[2].fieldOne" id="someStuff_fdf_fieldOne_2" ..>
我已经这样做了一些全局变量默认设置为0:
var globalNewIndex = 0;
在克隆并重置新行中的值后,在add函数中:
var newIndex = globalNewIndex+1;
var changeIds = function(i, val) {
return val.replace(globalNewIndex,newIndex);
}
$('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds );
globalNewIndex++;