使用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将表行克隆到另一个表

回答

相关问题