克隆最近的表格行

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 ，

1. empty其first-child （ td ）的內容。
2. 將其last-child （td）的html設置為close元素的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();
    });
});

演示： 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來定位兩個table或在表中添加一個類並使用它。