あるテーブルから別のテーブルに行を追加

Question

今すぐ行をクリックするか、テーブル製品に入力してください。私がしたいのは、最初に製品を選択し、使用後にテーブル製品に行を移動した後にテーブル製品に追加するボタンを追加することです。上記の行をテーブルから削除したいです。

jsfiddle： http://jsfiddle.net/4qFgX/107/

$('#proctable tr').click(function() { 
 
    $(this).clone().appendTo('#comptable'); 
 
    return false; 
 
}) 
 

 
$('body').on('mouseenter', 'input', function() { 
 
    $('.btn').prop('disabled', true); 
 
}); 
 
$('body').on('mouseout', 'input', function() { 
 
    $('.btn').prop('disabled', false); 
 
});

table td { 
 
    /* background:#3f3f3f;*/ 
 
    line-height: 28px; 
 
    border-bottom: 1px solid #333; 
 
    padding: 5px; 
 
} 
 

 
table tr { 
 
    /*background: #3f3f3f;*/ 
 
    width: 100%; 
 
} 
 

 
table { 
 
    margin-left: 10px; 
 
    width: 800px; 
 
    font-family: 'Lato', sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="processor"> 
 
    <table id="proctable"> 
 
    <tr class="header"> 
 
     <th>Description</th> 
 
     <th>Price</th> 
 
    </tr> 
 
    <tr class="hover"> 
 
     <td><span id="4770K"><input type="checkbox">produc1</span></td> 
 
     <td>$320</td> 
 
    </tr> 
 
    <tr class="hover"> 
 
     <td><span id="4771"><input type="checkbox">product 2</span></td> 
 
     <td>$290</td> 
 
    </tr> 
 
    <tr class="hover"> 
 
     <td><span id="4770"><input type="checkbox">product 3</span></td> 
 
     <td>$280</td> 
 
    </tr> 
 
    <tr class="hover"> 
 
     <td><span id="4771"><input type="checkbox">product 4</span></td> 
 
     <td>$240</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div class="col-md-12"> 
 
    <div class="col-md-6"> 
 
    <button type="button" class="btn btn-success">Add product</button> 
 
    </div> 
 
    <div class="col-md-6">select all 
 
    <div class="btn-group"> 
 
     <div class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 
     <input type="checkbox" name="" value=""> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div> 
 

 
<h1> 
 

 
    table product 
 
</h1> 
 
<br><br> 
 
<div id="aside"> 
 
    <table id="comptable"> 
 
    <tr class="header"> 
 
     <th>Product</th> 
 
     <th>Price</th> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

最初に、テーブル行の代わりにボタンのクリックイベントが必要になります。そのボタンにIDを付けると見つけやすくなります。私の例では、私はbtnAddProduct

<button id="btnAddProduct" type="button" class="btn btn-success">Add product</button> 

$('#btnAddProduct').click(...); 

2.次を使用しました、あなたは、製品テーブル内のすべての確認入力を取得し、そのをつかんによって確認されているものの行を見つけるしたいと思います親の行

var $checkedRows = $("#proctable input[type='checkbox']:checked").closest("tr"); 

3.最後に、あなたはそれらを移動するときに行を削除するdetach()を追加することができます。

$checkedRows.detach().clone().appendTo('#comptable'); 

完成品：私は選択してクリックしたときに

JSFiddle

$('#btnAddProduct').click(function(){ 
    var $checkedRows = $("#proctable input[type='checkbox']:checked").closest("tr"); 
    $checkedRows.detach().clone().appendTo('#comptable'); 
    return false; 
}) 

Answer 2

テーブルから行を外し。

$('#proctable tr').click(function(){ 
    $(this).detach().clone().appendTo('#comptable'); 
    return false; 
}) 

ここにはfiddleが更新されています。