Question

我最近问了这个question

从那时起，我发现我想做的事情不会奏效。这是因为表是由for循环生成的，每次都会增加id。因此，我需要修改一些内容，以便它也可以为表添加行。我更新了我的小提示，以显示两个表JSFiddle

的示例

基本上，我现在这样做

$(function() {
    $(".addCF").click(function(){
       var clone = $(this).closest('tr').clone(true).insertAfter($(this).closest('tr'));
    });
    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

我可以使用前面的示例自己完成克隆行的名称和标签。我的主要问题是我不想克隆整行。目前，正在克隆这个

<tr>
    <td><label class="subjectline" for="User1">User NOC M1</label></td>
    <td id="slLabel">SL_A</td>
    <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
    <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
</tr>

我需要它来克隆这个但是让第一个td为空。另外，像最初的问题一样，最后一个td应该是一个关闭按钮

<a href="javascript:void(0);" class="remCF">Remove</a>

是否可以这样做？

由于

Answer 1

来自克隆的tr，

empty其first-child（td）的内容。
将其last-child（td）的html设为关闭元素的html，

$(function() {
    $(".addCF").click(function(){
       var clone = $(this).closest('tr').clone(true);
       $("td:first-child", clone).empty();
       $("td:last-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>');
       clone.insertAfter( $(this).closest('tr'));
    });
    $("table.table").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

DEMO

Answer 2

您需要更改克隆TR的html：

<强> HTML：

<table id="customFields1" class="table table-bordered table-hover additionalMargin alignment">
    <thead>
    <tr>
        <th colspan="2"></th>
        <th>Some Title</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><label class="subjectline" for="User1">User NOC M1</label></td>
            <td id="slLabel">SL_A</td>
            <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
            <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
        </tr> 

    </tbody>
</table>

<table id="customFields2" class="table table-bordered table-hover additionalMargin alignment">
    <thead>
    <tr>
        <th colspan="2"></th>
        <th>Some Title</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><label class="subjectline" for="User1">User NOC M1</label></td>
            <td id="slLabel">SL_A</td>
            <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
            <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
        </tr> 
    </tbody>
</table>

<强> JQUERY：

$(function() {
    $(".addCF").click(function(){
       var closest_tr =$(this).closest('tr').clone(true); 
       closest_tr = $(closest_tr).find("td:first").html("").parent();
       var clone = closest_tr.insertAfter( $(this).closest('tr'));
    });
    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

DEMO： https://jsfiddle.net/116hvkhe/

Answer 3

这是你要找的东西：https://jsfiddle.net/8zwf9njr/13/

$(".addCF").click(function(){
    var clone = $(this).closest('tr').clone(true);
    clone.find('td:first-child').html('');
    clone.find('td:last-child').html('<a href="javascript:void(0);" class="remCF">Remove</a>');
    clone.insertAfter( $(this).closest('tr'));
});

您找到克隆的第一个td元素并将其清空。然后你找到克隆的最后一个td，然后用你的删除按钮替换它中的任何内容。

PS。我认为原始删除点击代码中也有拼写错误：它应该是$("#customFields1").on('click',，而不仅仅是#customFields。或者，您可以使用更通用的选择器（如table）来定位两个表，或者向表中添加一个类并使用它。

克隆最近的表格行

3 个答案:

DEMO