Jquery在當前div之后粘貼克隆的tr

Question

我正在構建一個自動創建字符串的系統。 我在復制和粘貼一些克隆數據時遇到了一些問題。 當我按下“添加產品”按鈕時，tr將被粘貼到該表中最后一個tr下面，代碼如下： $('.tableProducts tr').last().after(item); 這很好，正如你在下面的例子中看到的那樣：

情況0（當你訪問網址時）
情況1：單擊添加產品

現在這是我的問題：當我單擊“創建”選項按鈕時，將克隆該表，以便可以創建包含產品的其他選項。 第二個選項中的添加產品按鈕仍然有效，它在第二個選項下添加了另一個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），請隨時問我！ 快樂的編碼

Answer 1

您需要獲取父div並在其中找到表，否則它將始終添加到最后找到的表中，因此您的代碼應該是，

$('.addproduct').click(function (e) {
    // Clone a product and add it to the option.
    e.preventDefault();
    var $parent = $(this).closest('.productdiv'), // find parent div
        item = $parent.find('.hiddenTemplate tr').eq(1).clone(true);
    $parent.find('.tableProducts tr').last().after(item);
});

更新后，根據您的HTML結構，您需要這樣的東西，

$('.container').on('click','.addproduct',function(e) {
    // Clone a product and add it to the option.
    e.preventDefault();
    var $parent = $(this).closest('.optiondiv').next('.productdiv'), // find parent div
        item = $('.hiddenTemplate tr').eq(1).clone(true);
    $parent.find('.tableProducts tr').last().after(item);
});

 $(document).ready(function() { $('.container').on('click','.addproduct',function(e) { // Clone a product and add it to the option. e.preventDefault(); var $parent = $(this).closest('.optiondiv').next('.productdiv'), // find parent div item = $('.hiddenTemplate tr').eq(1).clone(true); $parent.find('.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/1.9.1/jquery.min.js"></script> <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> 

Answer 2

您可以根據表結構嘗試此代碼

$('.addproduct').click(function(e) {
    // Clone a product and add it to the option.
    e.preventDefault();
    var item = $('.hiddenTemplate tr').eq(1).clone(true);
    $(this).parents(".optiondiv").next().find(".tableProducts tr").last().after(item);

  });