為什么是 <tfoot> 每次我單擊按鈕時添加？

Question

當我單擊按鈕以刪除和添加商品（ buttAdd / nameDelete ）時，將添加新行<tfoot> 。 當我創建帶有數組this.products的表時，我還使用產品的總價創建了<tfoot> ，在添加或刪除新產品時，產品的價格被認為是正確的。

如何實現僅在創建表時才添加的<tfoot> （這是show ()方法），而不是在每次按下Delete或Add按鈕時都不創建新的<tfoot> ？

 //Product Creation Class class Product { constructor(name, count, price) { this.name = name; this.count = count; this.price = price; } } Product.SORT_ORDER_ASC = 1; Product.SORT_ORDER_DESC = -1; // Сlass where products are recorded class Shop { constructor() { this.products = []; } //method for adding a product addProduct(newProduct) { this.products.push(newProduct); } //method for remove product by name deleteProductByName(productName) { let i = this.products.length; while (i--) { if (productName === this.products[i].name) { this.products.splice(i, 1); } } } // get total price by all products get totalProductsPrice() { return this.products.map(product => product.price).reduce((p, c) => p + c); } //method for sorting the product at its price sortProductsByPrice(sortOrder) { const sorted = this.products.sort((a, b) => { return a.price > b.price ? sortOrder : -sortOrder; }); return sorted; } // method to draw the table with product property ( // name, count, price) show() { const rows = document.querySelectorAll("#shop .data"); for (let i = rows.length - 1; i >= 0; i--) { const e = rows.item(i); e.parentNode.removeChild(e); } const table = document.getElementById("shop"); for (let i = 0; i < this.products.length; i++) { //create table table.innerHTML += `<tbody><tr class="data"><td>${this.products[i].name}</td> <td>${this.products[i].price}</td> <td>${this.products[i].count}</td></tr></tbody>`; } //show total price by all products table.innerHTML += `<tfoot><tr><td colspan="3" id="total-price">Total price: ${shop.totalProductsPrice}</td></tr></tfoot>`; } } // add new product by click const formAdd = document.forms[0]; const inputsAdd = formAdd.elements; const buttAdd = formAdd.elements[3]; buttAdd.addEventListener('click', (e) => { e.preventDefault(); shop.addProduct(new Product(inputsAdd[0].value, parseInt(inputsAdd[2].value), parseInt(inputsAdd[1].value))); shop.show(); }, false); // delete product by name after click const formDelete = document.forms[1]; const nameDelete = formDelete.elements[0]; const buttDelete = formDelete.elements[1]; buttDelete.addEventListener('click', (e) => { e.preventDefault(); shop.deleteProductByName(nameDelete.value); shop.show(); }, false); let shop = new Shop(); shop.addProduct(new Product("product", 1, 2000)); shop.addProduct(new Product("product1", 2, 500)); shop.addProduct(new Product("product2", 3, 1000)); shop.show(); const priceFilter = document.getElementById("filter"); //filter products by price priceFilter.addEventListener("click", (e) => { shop.sortProductsByPrice(Product.SORT_ORDER_ASC); shop.show(); }, false); console.log(shop.products); 

 <div class="Shop"> <div class="add-product"> <h1>Add product</h1> <form id="addForm"> <label for="name" >Name of product</label> <input type="text" id="name" class="input-product"> <label for="price">Price of product</label> <input type="text" id="price" class="input-product"> <label for="count">Count of product</label> <input type="text" id="count" class="input-product"> <button id="add">Add</button> </form> </div> <div class="product-table"> <h2>Products</h2> <form id="delete-form"> <label for="name-delete">Delete product by name</label> <input type="text" id="name-delete" class="input-delete"> <button id="delete" type="button">Delete</button> </form> <table id="shop"> <caption>Products that are available in the store</caption> <tr> <th>Name:</th> <th id="filter">Price:</th> <th>Count:</th> </tr> </table> </div> </div> 

Answer 1

因為每次使用.show渲染時都添加<tfoot> 。 卸下腳踩將解決此問題。

const tfoot = table.querySelector('tfoot');
if(tfoot)
    tfoot.remove();

檢查JSFiddle