在单击按钮下方插入行

Question

我正在寻找一种在行的正下方插入元素的方法。我的表应如下所示：

正如您所见，我的行下面插入了以下元素：

<tr>
  <td></td>
  <td>
    <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                        Add Product2
                                    </button>
  </td>
</tr>

下面你可以找到我可行的例子：

＆＃13;

＆＃13;

$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))

function clickDispatcherTable(e) {
  let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")

  if (plusButton.hasClass("product2")) {
    let plusButtonParent = plusButton[0].parentElement
    plusButtonParent.insertAdjacentHTML('beforebegin', `
    <tr>
      <td></td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product2
                                        </button>
      </td>
    </tr>
            `)
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>
        <button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
                                            Add Product1
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product2
                                        </button>
        <button type="button" class="btn btn-dark btn-sm product2">+</button>
      </td>
    </tr>
    <tr>
      <td>Product3</td>
      <td>
        <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
                                            Add Product 3
                                        </button>
        <button type="button" class="btn btn-dark btn-sm product3">+</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

如您所见，元素插在侧面而不是底部。

有关如何在行下方插入元素的任何建议吗？

感谢您的回复！

Answer 1

这是您的Javascript的问题。你很亲密！

这是有问题的一行：

let plusButtonParent = plusButton[0].parentElement;

您正在访问<td>元素。因此，在<tr>启动之前插入<td>会产生类似这样的内容：

<tr>
  <tr> <!-- this code is added -->
    <td>...</td> <!-- this code is added -->
  </tr> <!-- this code is added -->
  <td>...</td>
</tr>

这显然不是你想要的。因此，请改为定位父<tr>，并解决问题。

let plusButtonParent = plusButton[0].parentElement.parentElement;

并且您可能希望将Product 2保持在您的示例中的顶部。很简单，只需将beforebegin更改为afterend。

＆＃13;

＆＃13;

$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))

function clickDispatcherTable(e) {
  let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")

  if (plusButton.hasClass("product2")) {
    let plusButtonParent = plusButton[0].parentElement.parentElement;
    plusButtonParent.insertAdjacentHTML('afterend', `
    <tr>
      <td></td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product2
                                        </button>
      </td>
    </tr>
            `)
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>
        <button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
                                            Add Product1
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product2
                                        </button>
        <button type="button" class="btn btn-dark btn-sm product2">+</button>
      </td>
    </tr>
    <tr>
      <td>Product3</td>
      <td>
        <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
                                            Add Product 3
                                        </button>
        <button type="button" class="btn btn-dark btn-sm product3">+</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;