Fatal编程技术网

jQuery克隆表行

jquery

jQuery克隆表行,jquery,clone,Jquery,Clone,我有一张桌子，桌子的末端有一个“添加”按钮。单击此按钮时，我希望在当前行下方创建一个新的表行。我还希望此行的输入字段为空。我正试图使用.clone（）执行此操作，但它会克隆页面上的所有行。请帮忙。谢谢 脚本 $("input.tr_clone_add") .live('click', function(){ $(this).closest('.tr_clone') .clone()

我有一张桌子，桌子的末端有一个“添加”按钮。单击此按钮时，我希望在当前行下方创建一个新的表行。我还希望此行的输入字段为空。我正试图使用.clone（）执行此操作，但它会克隆页面上的所有行。请帮忙。谢谢

脚本

$("input.tr_clone_add")
        .live('click', function(){
              $(this).closest('.tr_clone')
                    .clone()
                    .insertAfter(".tr_clone")
         });

$("input.tr_clone_add").live('click', function(){
    var new_row = $("#new-row-model tbody").clone();
    $("#table-data tbody").append(new_row.html());
});
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 -->

<!-- Your table -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
    <thead>
        <tr>
            <th>Name</th>
            <th>Location</th>
            <th>From</th>
            <th>To</th>
            <th>Add</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <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>
    <tbody>
</table>

<!-- Model of new row -->
<table id="new-row-model" style="display: none"> 
    <tbody>
        <tr>
            <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>
    <tbody>
</table>


名称
位置
从…起
到
添加
您的问题在于：

在每个
.tr\u克隆后插入：

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

您可能只想在正在复制的行上使用。还有一点
.find（':text'）.val（''）
将清除克隆的文本输入；大概是这样的：


var $tr    = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);


演示：或者对于现代jQuery：

我不确定哪一个输入应该以焦点结束，所以我不去管它。
给你：


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


现场演示：



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


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


尝试以下变体：


$(".tr_clone_add").live('click', CloneRow);

function CloneRow()
{
    $(this).closest('.tr_clone').clone().insertAfter(".tr_clone:last");
}



下面的代码将克隆表中最后一行并添加到最后一行之后：


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

$trLast.after($trNew);


工作示例：
试试这个

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 -->



<!-- Your table -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
    <thead>
        <tr>
            <th>Name</th>
            <th>Location</th>
            <th>From</th>
            <th>To</th>
            <th>Add</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <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>
    <tbody>
</table>

<!-- Model of new row -->
<table id="new-row-model" style="display: none"> 
    <tbody>
        <tr>
            <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>
    <tbody>
</table>



试试这段代码，
我使用了下面的代码来克隆和删除克隆的元素，我还使用了新类（newClass），它可以与新克隆的html一起自动添加

用于克隆..


 $(".tr_clone_add").live('click', function() {
    var $tr    = $(this).closest('.tr_clone');
    var newClass='newClass';
    var $clone = $tr.clone().addClass(newClass);
    $clone.find(':text').val('');
    $tr.after($clone);
});



$(".tr_clone_remove").live('click', function() { //Once remove button is clicked
    $(".newClass:last").remove(); //Remove field html
    x--; //Decrement field counter
});


用于删除克隆元素。


 $(".tr_clone_add").live('click', function() {
    var $tr    = $(this).closest('.tr_clone');
    var newClass='newClass';
    var $clone = $tr.clone().addClass(newClass);
    $clone.find(':text').val('');
    $tr.after($clone);
});



$(".tr_clone_remove").live('click', function() { //Once remove button is clicked
    $(".newClass:last").remove(); //Remove field html
    x--; //Decrement field counter
});


html如下所示


<tr class="tr_clone">
                       <!-- <td>1</td>-->
                        <td><input type="text" class="span12"></td>
                        <td><input type="text" class="span12"></td>
                        <td><input type="text" class="span12"></td>
                        <td><input type="text" class="span12"></td>
                        <td><input type="text" class="span10" readonly>
                        <span><a href="javascript:void(0);" class="tr_clone_add" title="Add field"><span><i class="icon-plus-sign"></i></span></a> <a href="javascript:void(0);" class="tr_clone_remove" title="Remove field"><span style="color: #D63939;"><i class="icon-remove-sign"></i></span></a> </span> </td> </tr>



非常容易克隆最后一行，只需jquery按下一个按钮：

您的表格HTML：


<table id="tableExample">
    <thead>
        <tr>
            <th>ID</th>
            <th>Header 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Line 1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2"><button type="button" id="addRowButton">Add row</button></td>
        </tr>
    </tfoot>
</table>



$(document).on('click', '#addRowButton', function() {
    var table = $('#tableExample'),
        lastRow = table.find('tbody tr:last'),
        rowClone = lastRow.clone();

    table.find('tbody').append(rowClone);
});



问候
 我猜您也希望更新
name
参数，以避免数据冲突（即新行中输入的值覆盖克隆行的值）…？嗨，Tomm，我认为name值不会冲突，我将不得不在某个时候添加一个区别点，尽管可能会在tr类中添加一个数字？我通常使用一个“模板”进行克隆，通过css将其样式设置为“显示：无”。有几件事：（1）宽度、
边框、
单元格填充
，和
cellspacting
属性被弃用，取而代之的是CSS样式。切换到CSS。（2） 对表头单元格使用TH而不是TD元素。（3） 您不能有多个自动对焦字段。@Šime Vidas谢谢您选择它。干杯在
.treest（'tr）
之后出现
[0]
以及在小提琴中出现
table=$（'#table data'）[0]
的原因是什么？为什么不干脆
var thisRow=$（this.nexist（'tr'）？（有帮助的例子，顺便说一句，+1）@gibberish在jQuery对象上应用
[0]
，返回该jQuery对象内的第一个DOM元素。这种模式是我的一个老习惯——我喜欢将对DOM对象的引用直接存储在变量中。在这种情况下，您可以省去它，因为我们将
thisRow
变量传递到一个新的
$（）
，它不关心是否接收DOM对象或包含DOM对象的jQuery对象。非常有用，谢谢Sime。我总是留意你的答案。他们写得好，聪明，有教育意义。同时，祝贺我们的成功与日俱增。我看到你富有洞察力的文章受到了最好的人的赞赏。当之无愧；干得好。@mzvarik为什么？前导的
$
通常提醒您在jQuery中包装了元素，而不仅仅是普通元素。到处使用它们是因为你的手指认为用PHP会是一个坏习惯，但这里不是这样。live（）现在已被弃用，请不要使用。@Sensoray
live
仅在2011年的原始示例中出现。我意识到，我只是在注释中编写它，以便其他查看它的人知道。我试图找出不同的方法，并尝试在不知道/检查答案发布日期的情况下进行直播，因为答案被标记为正确。也许您可以编辑/添加一个注释，以便其他检查它的人也知道：]