CODEWITHSUNDEEP
jqueryhtmlcss
Spilleren
Spilleren

Reputation: 3

Clone table row and add td

So i am trying to copy a row from one table into a new one and then add a extra td at the end of the cloned row with a delete button in it.

So far i have been able to copy the row without problems, but can seem to figure out a way of adding the new 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>

Upvotes: 0

Views: 182

Answers (2)

Gagan Bhatia
Gagan Bhatia

Reputation: 1

this line will give different id newTr.find("#add").attr("id","del"); 
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();
    newTr.find("#add").attr("id","del");
    items.push(newTr);
    newTr.appendTo($("#products_chosen"));
  }
});

Upvotes: 0

guradio
guradio

Reputation: 15555

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 the button in the cloned element using .append()

Upvotes: 2

Related Questions