jquery - 克隆表行并添加 td

Question

所以我试图将一个表中的一行复制到一个新表中，然后在克隆行的末尾添加一个额外的 td，其中包含一个删除按钮。

到目前为止，我已经能够毫无问题地复制该行，但似乎可以找到一种添加新 td 的方法。

var items = [];

$('.addme').click(function() {
  var $this = $(this);
  $this.toggleClass('addme');
  if ($this.hasClass('addme')) {
    $this.val('Tilføj').toggleClass('added');
  } else {
    $this.val('Tilføjet').toggleClass('added');
    var newTr = $(this).closest("tr").clone();
    items.push(newTr);
    newTr.appendTo($("#products_chosen"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products" class="table table-bordered table-striped table-shopsite display" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Producent</th>
      <th>Navn</th>
      <th>Land</th>
      <th>Pris i kr. pr. kg.</th>
      <th>Mængde</th>
      <th>Favorit</th>
      <th></th>
    </tr>
  </thead>

  <tr>
    <td>1726</td>
    <td>Danroots</td>
    <td>Gulerod</td>
    <td>Danmark</td>
    <td>5 kr</td>
    <td><input type="number" value="" class="qty" name="qty"></input>
    </td>
    <td><i class="heart fa fa-heart-o fa-2x"></i></td>
    <td><input type="button" id="add" class="addme" Value="Tilføj"></input>
    </td>
  </tr>
  <tr>
    <td>1726</td>
    <td>Danroots</td>
    <td>Gulerod</td>
    <td>Tyskland</td>
    <td>5 kr </td>
    <td><input type="number" value="" class="qty" name="qty"></td>
    <td><i class="heart fa fa-heart-o fa-2x"></i></td>
    <td><input type="button" class="addme" Value="Tilføj"></input>
    </td>
  </tr>
  <tr>
    <td>1726</td>
    <td>Danroots</td>
    <td>Agurk</td>
    <td>Spanien</td>
    <td>5kr</td>
    <td><input type="number" value="" class="qty" name="qty"></td>
    <td><i class="heart fa fa-heart-o fa-2x"></i></td>
    <td><input type="button" class="addme" Value="Tilføj"></input>
    </td>
  </tr>

</table>

<br> <br> <br>



<div class="table">
  <table id="products_chosen" class="table table-bordered table-striped table-shopsite display" cellspacing="0">
    <thead>
      <tr class="active">
        <th>ID</th>
        <th>Producent</th>
        <th>Navn</th>
        <th>Land</th>
        <th>Pris pr. kg.</th>
        <th>Mængde</th>
        <th>Favorit</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody <tr>
      </tr>
    </tbody>
    <tfoot>
      <tr>

      </tr>
    </tfoot>

  </table>

Answer 1

var items = [];

$('.addme').click(function() {
  var $this = $(this);
  $this.toggleClass('addme');
  if ($this.hasClass('addme')) {
    $this.val('Tilføj').toggleClass('added');
  } else {
    $this.val('Tilføjet').toggleClass('added');
    var newTr = $(this).closest("tr").clone().append("<td><button>deletebutton</button></td>");
    items.push(newTr);
    newTr.appendTo($("#products_chosen"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products" class="table table-bordered table-striped table-shopsite display" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Producent</th>
      <th>Navn</th>
      <th>Land</th>
      <th>Pris i kr. pr. kg.</th>
      <th>Mængde</th>
      <th>Favorit</th>
      <th></th>
    </tr>
  </thead>

  <tr>
    <td>1726</td>
    <td>Danroots</td>
    <td>Gulerod</td>
    <td>Danmark</td>
    <td>5 kr</td>
    <td><input type="number" value="" class="qty" name="qty"></input>
    </td>
    <td><i class="heart fa fa-heart-o fa-2x"></i></td>
    <td><input type="button" id="add" class="addme" Value="Tilføj"></input>
    </td>
  </tr>
  <tr>
    <td>1726</td>
    <td>Danroots</td>
    <td>Gulerod</td>
    <td>Tyskland</td>
    <td>5 kr </td>
    <td><input type="number" value="" class="qty" name="qty"></td>
    <td><i class="heart fa fa-heart-o fa-2x"></i></td>
    <td><input type="button" class="addme" Value="Tilføj"></input>
    </td>
  </tr>
  <tr>
    <td>1726</td>
    <td>Danroots</td>
    <td>Agurk</td>
    <td>Spanien</td>
    <td>5kr</td>
    <td><input type="number" value="" class="qty" name="qty"></td>
    <td><i class="heart fa fa-heart-o fa-2x"></i></td>
    <td><input type="button" class="addme" Value="Tilføj"></input>
    </td>
  </tr>

</table>

<br> <br> <br>



<div class="table">
  <table id="products_chosen" class="table table-bordered table-striped table-shopsite display" cellspacing="0">
    <thead>
      <tr class="active">
        <th>ID</th>
        <th>Producent</th>
        <th>Navn</th>
        <th>Land</th>
        <th>Pris pr. kg.</th>
        <th>Mængde</th>
        <th>Favorit</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody <tr>
      </tr>
    </tbody>
    <tfoot>
      <tr>

      </tr>
    </tfoot>

  </table>

1. 使用 .append() 将按钮附加到克隆的元素中