3
我正在構建一個自動創建字符串的系統。我在複製和粘貼一些克隆數據時遇到了一些問題。當我按下「添加產品」按鈕，TR將是最後TR下，在該表中粘貼下面的代碼：$('.tableProducts tr').last().after(item);這工作得很好，你可以在我的例子樓下看到：
Jquery在當前div後粘貼一個克隆的tr
狀況0 （當你訪問的網址）
情況1：添加產品點擊 
現在，這是我的問題：當我點擊創建選項按鈕，該表將被克隆，這樣的其他選擇與產品可以創建d。第二個選項中的添加產品按鈕仍然有效，它在第二個選項下面添加了另一個tr。但是當我點擊第一個添加產品按鈕時，它會在已添加的最後一個選項下添加另一個tr。它應該在表中嵌入一個tr，而不是最後一個表！這裏有一些例子，讓你更好地瞭解我的意思。
1.創建選項已經被點擊 
2.添加產品已點擊了第二個選項 
3.添加產品已在點擊第一個選項（問題！） 
我希望你能理解我的問題，下面你可以找到我的代碼。
$(document).ready(function() {
$('.addproduct').click(function(e) {
// Clone a product and add it to the option.
e.preventDefault();
var item = $('.hiddenTemplate tr').eq(1).clone(true);
$('.tableProducts tr').last().after(item);
});
$('.addOption').click(function(e) {
e.preventDefault();
var optiondiv = $('.optiondiv:first').clone(true);
var productdiv = $('.productdiv:first').clone(true);
var optiontable = $('.optiondiv table:eq(1)').clone(true);
var producttable = $('.productdiv table:eq(1)').clone(true);
optiondiv.html(optiontable);
productdiv.html(producttable);
optiontable.removeAttr('class');
producttable.removeAttr('class');
optiontable.addClass('tableOptions');
producttable.addClass('tableProducts');
$('.hr').before(optiondiv);
$('.hr').before(productdiv);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
EDIT 1: HTML ADDED
<div class="container">
<div class="optiondiv">
<table class="tableOptions">
<tbody>
<tr>
<td><b>Option</b>:</td>
<td><b>Title</b>:</td>
<td><b>Position</b>: </td>
<td><b>Input Type</b>:</td>
<td><b></b></td>
</tr>
<tr>
<td>
<button class="addproduct">Add Product</button>
</td>
<td>
<input type="text" id="title">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<select id="input">
<option value="1">Drop-down</option>
<option value="2">Radio Buttons</option>
<option value="3">Checkbox</option>
<option value="4">Multiple Select</option>
</select>
</td>
<td>
<input type="checkbox" id="required"> Required?
</td>
</tr>
</tbody>
</table>
<table class="hiddenOption">
<tbody>
<tr>
<td><b>Option</b>:</td>
<td><b>Title</b>:</td>
<td><b>Position</b>: </td>
<td><b>Input Type</b>:</td>
<td><b></b></td>
<td><b></b></td>
</tr>
<tr>
<td>
<button class="addproduct">Add Product</button>
</td>
<td>
<input type="text" id="title">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<select id="input">
<option value="1">Drop-down</option>
<option value="2">Radio Buttons</option>
<option value="3">Checkbox</option>
<option value="4">Multiple Select</option>
</select>
</td>
<td>
<input type="checkbox" id="required"> Required?
</td>
</tr>
</tbody>
</table>
</div>
<div class="productdiv">
<table class="tableProducts">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault"> Is default?
</td>
<td>
<input type="checkbox" id="userdefined"> User required?
</td>
</tr>
</tbody>
</table>
<table class="hiddenTemplate">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault"> Is default?
</td>
<td>
<input type="checkbox" id="userdefined"> User required?
</td>
</tr>
</tbody>
</table>
</div>
<hr class="hr">
<button class="addOption">Create option</button>
</div>如果你需要一些更多的解釋或代碼（HTML），隨時問我！ 快樂編碼
你也應該把你的HTML :) – Dwhitz
請把你的HTML正在 –
新增的HTML內容！ –