jQuery Clone表行

Question

我有一个表格,末尾有一个添加按钮.当您单击此按钮时,我希望在当前一个下面创建一个新的表行.我还希望此行上的输入字段为空.我试图使用.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 -->

Answer 1

你的问题是你的insertAfter:

.insertAfter(".tr_clone")

每次插入后.tr_clone:

匹配的元素集将插入此参数指定的元素之后.

您可能只想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/

我不确定哪个输入应该以焦点结束,所以我一个人就离开了.

Answer 2

干得好:

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

现场演示: http ://jsfiddle.net/RhjxK/4/

更新:在jQuery中委派事件的新方法是

$(table).on('click', '.tr_clone_add', function () { … });

Answer 3

下面的代码将克隆最后一行并在表格的最后一行之后添加:

var $tableBody = $('#tbl').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();

$trLast.after($trNew);

工作示例:http://jsfiddle.net/kQpfE/2/