jQuery克隆表行

前端之家收集整理的这篇文章主要介绍了jQuery克隆表行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个表与添加按钮的末尾。当你点击这个按钮,我想要一个新的表行创建在当前的。我还希望此行上的输入字段为空。我试图这样做使用.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/

我不知道哪个输入应该以焦点结束,所以我离开了。

原文链接:https://www.f2er.com/jquery/184106.html

猜你在找的jQuery相关文章