所以我试图将一个表中的一行复制到一个新表中,然后在克隆行的末尾添加一个额外的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>
&#13;
答案 0 :(得分:2)
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>
.append()