javascript - 如何仅使用jQuery将行传递到其他表？

我正在学习JavaScript，我想像这样将行从表传递到其他表：



将表中的行传递到其他表，而无需重复同一行。
我如何能？

我有这个：

$(".btn_add").on("click", function() {
  var column1 = $(this).closest('tr').children()[0].textContent;
  var column2 = $(this).closest('tr').children()[1].textContent;
  var column4 = $(this).closest('tr').children()[3].textContent;
  var column5 = $(this).closest('tr').children()[4].textContent;
  $("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");

  $(".btn_remove").click(function() {
    $(this).parent().parent().remove();
  });

});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="first_table" class="table table-bordered">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Category</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Monitor A</td>
      <td>X</td>
      <td>5</td>
      <td>7.5</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse B</td>
      <td>X</td>
      <td>5</td>
      <td>12.4</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Keyboard D</td>
      <td>X</td>
      <td>8</td>
      <td>22.35</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Motherboard C</td>
      <td>Y</td>
      <td>14</td>
      <td>50</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
  </tbody>
</table>

<br>

<table id="second_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Input</th>
      <th>Calculated Field</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

最佳答案

基本上，您需要创建一个伪类以通过行的产品ID标识行。在我的示例中，我只是将其命名为“ copy_1”。然后，您可以检查第二表中是否已存在该ID。我还补充说，将增加输入字段以添加一种产品。如果您不希望这样做，只需删除else语句即可。

旁注：使用“ on”方法，您可以声明一个全局侦听器，该侦听器也适用于动态生成的元素。您也可以将其用于“删除”按钮，并且在有人添加产品时不需要每次都重新声明它。我也在代码中对此进行了更改。有关此信息，请参阅此帖子：Jquery adding event listeners to dynamically added elements

$(".btn_add").on("click", function() {
  var column1 = $(this).closest('tr').children()[0].textContent;
  var column2 = $(this).closest('tr').children()[1].textContent;
  var column4 = $(this).closest('tr').children()[3].textContent;
  var column5 = $(this).closest('tr').children()[4].textContent;
  // check if the row already exists in the 2nd table
  // if no, add the line to the 2nd table
  // if yes, add one product to the input field
  if($("#second_table .copy_"+column1).length == 0)
  {

    $("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' value='1'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
  }
  else
  {
     var value = parseInt($("#second_table .copy_"+column1+" input").val()) + 1;
     $("#second_table .copy_"+column1+" input").val(value);
  }
});

$("body").on("click",".btn_remove", function() {
    $(this).parent().parent().remove();
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="first_table" class="table table-bordered">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Category</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Monitor A</td>
      <td>X</td>
      <td>5</td>
      <td>7.5</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse B</td>
      <td>X</td>
      <td>5</td>
      <td>12.4</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Keyboard D</td>
      <td>X</td>
      <td>8</td>
      <td>22.35</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Motherboard C</td>
      <td>Y</td>
      <td>14</td>
      <td>50</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
  </tbody>
</table>

<br>

<table id="second_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Input</th>
      <th>Calculated Field</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

关于javascript - 如何仅使用jQuery将行传递到其他表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39239693/