Question

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

到目前为止，这是我的代码

$(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

Rino的回答是正确的，但是如果您有多行，这将无效。我已经改变了remove（）部分。这应该工作。

<强>更新

抱歉，我的代码不正确。这是工作代码：

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/

Answer 2

您可以使用data-*属性来实现此功能。因此，在生成表时，请确保找到一种方法来为数据属性设置不同的值（因为我不确定它是纯HTML还是从某些代码生成）。所以你的HTML和Jquery看起来应该如下所示

＆＃13;

$('.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);
   }       
});

＆＃13;

table{
  width:100%;
}

＆＃13;

<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>

＆＃13;

我测试了它，这里也是Working Fiddle

如果有帮助，请告诉我

使用jQuery将表行克隆到另一个表

2 个答案: