Add row from one table to another

Question

Right now if I click in the row or input goes to table product. What I want to do is be able to select first the products and after use the button add product to add in the table product after the row be moved to the table product i want remove this row from the table above

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

1. First, you'll want the click event on the button instead of the table row. Let's give that button an ID so it's easier to find. In my example, I've used btnAddProduct

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

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

2. Next, you'll want to find what rows are checked by getting all checked inputs in the product table, and grabbing their parent row.

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

3. Finally, you can add detach() to remove the rows when moving them.

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

The finished product:

JSFiddle

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

Answer 2

Detach the row from the table.

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

Here is the updated fiddle.