Переключить клонирование строки таблицы в другую таблицу с помощью jQuery

Question

Я создал таблицу HTML, каждая строка имеет кнопку, которая при нажатии будет клонировать эту строку в другую таблицу. Моя проблема заключается в том, что я не уверен, как сделать то же самое, что и клонировал строку, чтобы затем удалить строку из второй таблицы, когда она была нажата во второй раз - вроде как cloneToggle, если такая вещь существовала.

Вот мой код до сих пор

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

ли клонированный строки должны иметь уникальный класс/идентификатор для того, чтобы затем быть удален со вторым щелчком по ссылке «TD-ссылка»?

Вот 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-* для этого, чтобы работать. Поэтому, создавая таблицу, убедитесь, что вы нашли способ установить разные значения атрибуту 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 слишком

Позвольте мне знать, если это помогает

Answer 2

ответ Рино является правильным, но это не будет работать, если у вас есть несколько строк. Я изменил эту часть 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/