Javascript 为什么<；tfoot>；每次单击按钮时都添加了？

当我单击按钮删除和添加商品（

buttAdd/nameDelete

）时，会添加一个新行

。当我使用数组

this.products

创建表时，我还使用产品的总价创建

，添加或删除新产品时，产品的价格被认为是正确的

如何实现仅在创建表时添加的

（这是

show（）

方法），而不是每次按delete或add按钮时都创建新的

？

//产品创建类
类产品{
建造商（名称、数量、价格）{
this.name=名称；
this.count=计数；
这个价格=价格；
}
}
Product.SORT\u ORDER\u ASC=1；
Product.SORT\u ORDER\u DESC=-1；
//С记录产品的地方
班级商店{
构造函数（）{
这是产品=[]；
}
//添加产品的方法
addProduct（新产品）{
此.products.push（新产品）；
}
//按名称删除产品的方法
deleteProductByName（产品名称）{
设i=this.products.length；
而(我--){
如果（productName==this.products[i].name）{
本.产品.拼接（i，1）；
}
}
}
//获得所有产品的总价格
获取totalProductsPrice（）{
返回这个.products.map（product=>product.price）.reduce（（p，c）=>p+c）；
}
//按价格对产品进行分类的方法
sortProductsByPrice（sortOrder）{
const sorted=this.products.sort（（a，b）=>{
返回a.price>b.price？排序器：-排序器；
});
返回排序；
}
//方法绘制具有产品属性的表(
//名称、数量、价格）
show（）{
const rows=document.queryselectoral（#shop.data”）；
for（设i=rows.length-1；i>=0；i--）{
常数e=行。项目（i）；
e、 parentNode.removeChild（e）；
}
const table=document.getElementById（“shop”）；
for（设i=0；i{
e、 预防默认值（）；
shop.addProduct（新产品（inputsAdd[0]。值，parseInt（inputsAdd[2]。值），
parseInt（inputsAdd[1].value））；
shop.show（）；
}，假）；
//单击后按名称删除产品
const formDelete=document.forms[1]；
const nameDelete=formDelete.elements[0]；
const buttDelete=formDelete.elements[1]；
buttDelete.addEventListener（'click'，（e）=>{
e、 预防默认值（）；
shop.deleteProductByName（nameDelete.value）；
shop.show（）；
}，假）；
let shop=新商店（）；
shop.addProduct（新产品（“产品”），2000年1月）；
添加产品（新产品（“产品1”，2500））；
添加产品（新产品（“产品2”，3，1000））；
shop.show（）；
const priceFilter=document.getElementById（“过滤器”）；
//按价格筛选产品
priceFilter.addEventListener（“单击”，“e）=>{
shop.sortProductsByPrice（Product.SORT\u ORDER\u ASC）；
shop.show（）；
}，假）；
控制台.日志（商店.产品）

添加产品
产品名称
产品价格
产品计数
添加
产品
按名称删除产品
删去
商店中提供的产品
姓名：
价格：
计数：
因为每次使用
.show
渲染时都会添加
。删除tfoot将解决此问题

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

选中
，因为您只是在
shop.data开始时循环使用
。
显示
函数并删除这些元素，这意味着每次您都会留下一个空的tfoot。感谢您的回答，也许您可以告诉我为什么当我添加或删除新项目时，我无法按价格（“Pries:，method”sortProductsByPrice）对它们进行排序（sortOrder）”），在最初创建表时只能使用前三个选项？