我有一个表,末尾有一个“添加”按钮。当您单击此按钮时,我希望在当前行下方创建一个新的表行。我还希望该行的输入字段为空。我尝试使用 .clone() 来执行此操作,但它会克隆页面上的所有行。请帮忙。谢谢
Script
$("input.tr_clone_add")
.live('click', function(){
$(this).closest('.tr_clone')
.clone()
.insertAfter(".tr_clone")
});
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>Name</td>
<td>Location</td>
<td>From</td>
<td>To</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td><input type="text" autofocus placeholder="who" name="who" ></td>
<td><input type="text" autofocus placeholder="location" name="location" ></td>
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
</tr>
</table><!-- /table#table-data -->
你的问题是你的insertAfter http://api.jquery.com/insertAfter/:
.insertAfter(".tr_clone")
在每个之后插入.tr_clone
:
匹配的元素集将插入到此参数指定的元素之后。
您可能只想使用after http://api.jquery.com/after/在您要复制的行上。还有一点.find(':text').val('')
将清除克隆的文本输入;像这样的东西:
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
Demo: http://jsfiddle.net/ambiguously/LAECx/ http://jsfiddle.net/ambiguous/LAECx/或者对于现代 jQuery:http://jsfiddle.net/ambiguously/LAECx/3274/ http://jsfiddle.net/ambiguous/LAECx/3274/
我不确定哪个输入应该成为焦点,所以我不理会它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)