在點擊的按鈕下方插入行

Question

我正在尋找一種在行的正下方插入元素的方法。 我的表應如下所示：

如您所見，在我的行下方插入了以下元素：

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

在下面可以找到我可行的示例：

 $(".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> `) } } 

 <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> 

如您所見，元素插入在側面而不是底部。

有什么建議如何將元素插入行下方？

感謝您的答復！

Answer 1

這是Javascript的問題。 你近了！

這是有問題的行：

let plusButtonParent = plusButton[0].parentElement;

您正在訪問<td>元素。 因此，在<td>開始之前插入<tr>會導致如下所示：

<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 。

 $(".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> `) } } 

 <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>