jquery - 使用 jQuery 将表行切换到另一个表的克隆

Question

我创建了一个 HTML 表，每一行都有一个按钮，单击该按钮时，会将该行克隆到另一个表。我的问题是，我不知道如何制作克隆该行的相同按钮，然后在第二次单击时从第二个表中删除该行 - 有点像克隆切换(如果存在这样的事情)。

这是我到目前为止的代码

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

克隆的行是否需要具有唯一的类/ID，然后再次单击“td-link”链接即可将其删除？

这是 HTML

<table class="first-table">
    <tr>
        <td>info 1</td>
        <td>info 2</td>
        <td>info 3</td>
        <td><a class="td-link">+</a></td>
    </tr>
</table>

<table class="second-table">
</table>

Answer 1

您可以使用 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也是

请告诉我这是否有帮助