Избегайте дублирования клона

Я клонировать строки таблицы из одной таблицы в другую с помощью этого:Избегайте дублирования клона

$("button[name='addItem']").click(function(){ 
    var clone = $(this).closest('tr').clone(true); 
    clone.appendTo('#items tbody'); 
    })

Я хотел бы избежать клонирования и тот же элемент несколько раз, так что я пытался что-то вроде этого:

if(!$.contains("#items tbody",clone)){ 
    clone.appendTo('#items tbody'); 
}

, но он продолжает бросать false.

У кого-то возникла эта проблема?

источник

2016-05-05 Onilol

[jQuery.contains] (http://api.jquery.com/jquery.contains/) Это действительно действительно помогает сначала прочитать документацию. '$ .contains' получает 2 элемента DOM, а не селекторную строку и объект jQuery. –

Как только кнопка нажата, ее следует отключить? – Malk

@Malk удаляется. Я просто не вставлял эту часть, чтобы сделать ее более ясной. – Onilol

Присвоить data-* к клонированной строке и проверьте, что data позже

$("button[name='addItem']").click(function(){ 

    var tr= $(this).closest('tr'); // the TR to clone 

    if(tr.data("isCloned") === true) return; // Already cloned!! Stop here 

    tr.data("isCloned", true);  // Remember I'm cloned yey! 

    var clone = tr.clone(true); // clone it 
    clone.appendTo('#items tbody'); 
});

Другой способ, с помощью .addClass():

$("button[name='addItem']").click(function(){ 

    var tr = $(this).closest('tr:not(".isCloned")'); // the TR to clone? 

    tr.addClass("isCloned");  // Remember I'm cloned yey! 

    var clone = tr.clone(true); // clone it 
    clone.appendTo('#items tbody'); 
});

последний пример не может быть очевидным, но если возвращается селекторных ничего (благодаря селектору :not()), чем ничего не будет клонировано и добавлено.

источник

2016-05-05 20:09:08

классное решение, +1, но если в таблице назначения уже существует повторяющаяся строка, это, очевидно, ничего не сделает, чтобы предотвратить обман. –

@Pamblam интересное мышление. Давайте посмотрим, что OP должен прокомментировать. –

На самом деле таблица с клонами всегда пуста. Сценарий здесь не работал (1-й пример). – Onilol

Если вы отключите кнопку, вы не сможете добавить строку еще раз.

$("button[name='addItem']").click(function(){ 
 
    this.disabled = true; 
 
    var clone = $(this).closest('tr').clone(true); 
 
    //clone.find("button").remove(); 
 
    clone.appendTo('#items tbody'); 
 
    })

table { width:40%; height:140px; display:inline-block; border:1px solid black;}

<table id="source"> 
 
    <tbody> 
 
    <tr><td><button type='button' name='addItem'>+<td>1<td>one 
 
    <tr><td><button type='button' name='addItem'>+<td>2<td>two 
 
    <tr><td><button type='button' name='addItem'>+<td>3<td>three 
 
    <tr><td><button type='button' name='addItem'>+<td>4<td>four 
 
    <tr><td><button type='button' name='addItem'>+<td>5<td>five 
 
</table> 
 

 
<table id="items"><tbody> 
 
    
 
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

источник

2016-05-05 20:31:37 Malk

Избегайте дублирования клона

ответ

Смежные вопросы