Question

现在，如果我点击该行或输入转到表格产品。我想要做的是能够首先选择产品，并在使用按钮添加产品添加到表产品后，将行移动到表产品我想从上表中删除此行

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

1。首先，您需要按钮上的click事件而不是表格行。让我们给那个按钮一个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。

从一个表添加行到另一个表

2 个答案: