javascript - Jquery 在当前 div 之后粘贴克隆的 tr

Question

我正在构建一个自动创建字符串的系统。我在复制和粘贴一些克隆数据时遇到了一些问题。当我按下“添加产品”按钮时，将使用以下代码将 tr 粘贴到该表中的最后一个 tr 下:$('.tableProducts tr').last().after(item); 这工作正常，正如您在下面的示例中看到的那样:

情况0(访问url时)
情况一:点击添加产品

现在这是我的问题:当我单击“创建选项”按钮时，表格将被克隆，以便可以创建另一个包含产品的选项。第二个选项中的添加产品按钮仍然有效，它在第二个选项下方添加了另一个 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

您可以根据您的表结构尝试这段代码

$('.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);

  });