2016-05-05 66 views
2

私はこれを使用して別のテーブルからテーブルの行をクローニングしています:避けクローンの重複

$("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です。

誰かがこの問題に直面しましたか?最後の例は明らかではないかもしれない

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

が、セレクタ返す場合:.addClass()を使用して、その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'); 
}); 

別の方法について

+0

それは本当に最初のドキュメントを読むのに役立ちありません。 '$ .contains'はセレクタ文字列とjQueryオブジェクトではなく2つのDOM要素を受け取ります。 –

+0

ボタンをクリックすると、無効にする必要がありますか? – Malk

+0

@削除中です。私はちょうどそれを明確にするためにその部分を貼り付けませんでした。 – Onilol

答えて

1

割り当てクローニングされた行にdata-*と確認何も(何よりも:not()セレクタのおかげで)何も複製されずに追加されます。

+0

クールな解決策ですが、+1が重複している行が既に宛先テーブルに存在する場合、これは重複を防ぐために何もしません。 –

+0

@Pamblam面白い考え。 OPがそれについてコメントしなければならないことを見てみましょう。 –

+0

実際にクローンのあるテーブルは常に空になります。スクリプトはここでは機能しませんでした(1番目の例)。 – Onilol

0

ボタンを無効にすると、行を再度追加することはできません。 [jQuery.contains](http://api.jquery.com/jquery.contains/)

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

関連する問題