我有一个表与添加按钮的末尾。当你点击这个按钮,我想要一个新的表行创建在当前的。我还希望此行上的输入字段为空。我试图这样做使用.clone(),但它克隆页面上的所有行。请帮忙。谢谢
脚本
$("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
:
.insertAfter(".tr_clone")
每个.tr_clone后插入:
the matched set of elements will be inserted after the element(s) specified by this parameter.
你可能只是想在复制的行上使用after
。和一个小的.find(‘:text’)。val(”)将清除克隆的文本输入;像这样:
var $tr = $(this).closest('.tr_clone'); var $clone = $tr.clone(); $clone.find(':text').val(''); $tr.after($clone);
演示:http://jsfiddle.net/ambiguous/LAECx/
我不知道哪个输入应该以焦点结束,所以我离开了。