使用jQuery將錶行克隆到另一個表

我創建了一個HTML表，每行都有一個按鈕，單擊該按鈕時會將該行克隆到另一個表。我的問題是，我不知道如何去製作克隆該行的相同按鈕，然後再次單擊時從第二個表中刪除該行 - 有點像cloneToggle（如果存在這樣的事情）。使用jQuery將錶行克隆到另一個表

這裏是我到目前爲止的代碼

$(document).on('click', "[class*=td-link]", function() { 
    var row = $(this).closest('tr').html(); 
    $('.second-table').append('<tr>' + row + '</tr>'); 
});

是否克隆行需要有一個唯一的類/ ID爲它隨後與「TD-鏈接」 link的第二次點擊刪除嗎？

下面是HTML

來源

2016-02-28 Stephen

您可以包括你的HTML的例子 – aphextwix

我已經更新了它，以包括HTML，謝謝 – Stephen

肯定會需要方式來建立關係。主表中的數據是否有每行可用的唯一屬性？ – charlietfl

您可以用data-*屬性這個工作發揮。因此，當生成表格時，請確保找到一種方法來爲數據屬性設置不同的值（因爲我不確定它是純HTML還是從某些代碼生成）。所以，你的HTML和jQuery應該看起來像下面

$('.first-table').on('click', "[class*=td-link]", function() { 
 
    var rowNumber = $(this).closest('tr').data('row-num'); 
 
    if($('.second-table tr[data-row-num="'+rowNumber+'"]').length){ //if it already exists then remove it 
 
     $('.second-table tr[data-row-num="'+rowNumber+'"]').remove(); 
 
    } 
 
    else{ // else add it 
 

 
    var row = $(this).closest('tr').clone(); 
 
    $('.second-table').append(row); 
 
    }  
 
});

table{ 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="first-table"> 
 
    <tr data-row-num="1"> // note the data attribute 
 
    <td>info 1</td> 
 
    <td>info 2</td> 
 
    <td>info 3</td> 
 
    <td><a href="#" class="td-link">+</a> 
 
    </td> 
 
    </tr> 
 
    <tr data-row-num="2"> 
 
    <td>info 1</td> 
 
    <td>info 2</td> 
 
    <td>info 3</td> 
 
    <td><a href="#" class="td-link">+</a> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<hr/> 
 
<table class="second-table"> 
 
</table>

我已經測試過它，這裏是一個Working Fiddle太

讓我知道，如果這有助於

來源

2016-02-28 14:40:18

謝謝，我會試試這個。如果這有效，那麼這對我的問題來說似乎是一個完美的解決方案。 – Stephen

我剛剛更新了我的答案..看一看 –

可以簡化它也匹配數據屬性到行上創建一個ID ... $（'＃'+ rowNumber）.length' – charlietfl

綠諾的答案是正確的，但如果你有多個行，將無法正常工作。我已經改變了remove（）部分。這應該工作。

UPDATE

對不起，我的代碼是不正確的。這裏的工作代碼：

var secondTable = $('.second-table'); 
var idCounter = 0; 

$(document).on('click', "[class*=td-link]", function() { 
    var row = $(this).closest('tr'); 
    if(typeof(row.attr('clone-id')) != 'undefined') { 
     secondTable.find('tr[clone-id=\''+ row.attr('clone-id') +'\']').remove(); 
     row.removeAttr('clone-id'); 
    } else { 
     row.attr('clone-id', idCounter); 
     var clone = row.clone(); 
     secondTable.append(clone); 
     idCounter++; 
    } 
});

https://jsfiddle.net/zqug893d/

來源

2016-02-28 14:36:18

同樣的問題...索引在兩個表中都不匹配。它適用於每個 – charlietfl

中只有一個更新後的代碼。 –

使用jQuery將錶行克隆到另一個表

回答

相關問題