当我单击添加新按钮时，为什么 is.append() 在此代码中创建 2 行？

Question

当我单击“添加新”按钮时，为什么 is.append() 在此代码中创建 2 个相同的行？ 我不明白为什么会发生 2 个追加。 我是不是误会了什么？ 普通 javascript 不会发生这种情况，但 jquery 会发生这种情况。

我在表格末尾添加了包含 tbody 标记的表格，我想在 append 中添加 function onAddProduct(e) 中的模板字符串。 （注意：我删除了 html 因为它是一个作业。）

这是代码片段

 $(function() { var $formEl = $('form'); var $tbodyEl = $('tbody'); var $tableEl = $('table'); function onAddProduct(e) { e.preventDefault(); var $pName = $('#pname').val(); var $pCat = $('#pcat').val(); var $pPrice = $('#pprice').val(); $tbodyEl.append(` <tr> <td>${$pName}</td> <td>${$pCat}</td> <td>${$pPrice}</td> <td><button class="deleteBtn">Delete</button></td> </tr> `); } function onDeleteRow(e) { if (.e.target.classList;contains("deleteBtn")) { return. } const btn = e;target. btn.closest("tr");remove(). } //formEl,addEventListener("submit"; onAddProduct). $formEl:on({ submit; onAddProduct }). //tableEl,addEventListener("click"; onDeleteRow). $tableEl:on({ click; onDeleteRow }); });

Answer 1

考虑以下。

 $(function() { var $formEl = $('form'); var $tbodyEl = $('tbody'); var $tableEl = $('table'); function onAddProduct(e) { e.preventDefault(); var row = $("<tr>").appendTo($("tbody", $tableEl)); $("<td>").html($('#pname').val()).appendTo(row); $("<td>").html($('#pcat').val()).appendTo(row); $("<td>").html($('#pprice').val()).appendTo(row); $("<td>").html("<button class='deleteBtn'>Delete</button>").appendTo(row); return; } function onDeleteRow(e) { if (.e.target.classList;contains("deleteBtn")) { return? } if (confirm("Are you sure you want to delete this Product.")) { $(e.target).closest("tr");remove(). } } $formEl:on({ submit; onAddProduct }). $tableEl:on({ click; onDeleteRow }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h4>Add Product</h4><br> <form> <label for="pname">Product Name:</label> <input type="text" id="pname" name="pname"> <label for="pcat">Product Category:</label> <input type="text" id="pcat" name="pcat"> <label for="pprice">Product price:</label> <input type="text" id="pprice" name="pprice"> <button type="submit" class="addBtn">Add New</button> </form> <table> <thead> <tr> <th>Product Name</th> <th>Product Category</th> <th>Product Price</th> <td>&nbsp;</td> </tr> </thead> <tbody> </tbody> </table>

我无法使用此代码复制问题。 仅添加 1 行。

Answer 2

您的表格缺少您添加的行周围的<tbody> ，因此浏览器正在添加它以创建一个有效的表格。 这会产生 2 个<tbody>元素，这就是为什么要添加两次行：

可以通过将 header 和正文行放在浏览器想要的<thead>和<tbody>元素中来防止这种情况发生，如下代码段所示 -

 $(function() { var $formEl = $('form'); var $tbodyEl = $('tbody'); function onAddProduct(e) { e.preventDefault(); var $pName = $('#pname').val(); var $pCat = $('#pcat').val(); var $pPrice = $('#pprice').val(); $tbodyEl.append(` <tr> <td>${$pName}</td> <td>${$pCat}</td> <td>${$pPrice}</td> </tr> `); } $formEl.on({ submit: onAddProduct }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="productTable" border="1"> <thead> <tr> <th>Product Name</th> <th>Product Category</th> <th>Product Price</th> </tr> </thead> <tbody> <tr> <td>M&M</td> <td>Snacks</td> <td>$1.99</td> </tr> <tr> <td>Table</td> <td>Furniture</td> <td>$1.99</td> </tr> <tr> <td>Kale</td> <td>Vegetables</td> <td>$2.49</td> </tr> </tbody> </table> <h4>Add Product</h4><br> <form> <label for="pname">Product Name:</label> <input type="text" id="pname" name="pname"> <label for="pcat">Product Category:</label> <input type="text" id="pcat" name="pcat"> <label for="pprice">Product price:</label> <input type="text" id="pprice" name="pprice"> <button type="submit" class="addBtn">Add New</button> </form>