Javascript 删除HTML表的所有常规行

我有一个按钮，它应该删除表中除标题以外的所有行。到目前为止，它在表中循环以删除其所有行，但从未删除所有行。在我的原始代码中，它不包括在这里，我可以浏览不同的表，我希望能够删除它的所有内容，无论行数多少，使用相同的按钮。因为我也尝试了其他表格上的按钮，它总是不会删除所有项目

让mealObj={
菜单1：{
美努米：“牛排”，
ingr1：{
名称：“黄油”，
ingrType：“其他”，
金额：“2”，
金额类型：“tbsp”，
卡尔：“10”，
},
ingr2：{
名称：“欧芹”，
ingrType：“蔬菜”，
金额：“1”，
金额类型：“tsp”，
卡尔：“1”，
},
ingr3：{
名称：“大蒜”，
ingrType：“蔬菜”，
金额：“1/2”，
金额类型：“tsp”，
卡尔：“20”，
},
ingr4：{
名称：“酱油”，
ingrType：“其他”，
金额：“1/4”，
金额类型：“tsp”，
卡尔：“20”，
},
ingr5：{
名称：“牛肉”，
ingrType：“肉”，
金额：“3/4”，
数量类型：“磅”，
卡尔：“200”，
},
ingr6：{
名称：“盐”，
ingrType：“其他”，
金额：“1/8”，
金额类型：“tsp”，
cal:“0”，
},
ingr7：{
名称：“胡椒”，
ingrType：“其他”，
金额：“1/8”，
金额类型：“tsp”，
卡尔：“2”，
},
},
}
让IngerTable=document.getElementById（“ingr表”）；
对象（mealObj）；
函数对象（ingrList）{
让totalRowLength=IngerTable.rows.length；
为了（让我进入英格利斯特）{
for（让k进入ingrList[i]）{
if（ingrList[i][k].name！==未定义）{
让tableAmount=document.createElement（“输入”）；
tableAmount.setAttribute（“类型”、“编号”）；
tableAmount.id=“表金额”；
让tableCalNum=document.createElement（“输入”）；
tableCalNum.setAttribute（“类型”、“编号”）；
tableCalNum.id=“table cal”；
让行=IngerTable.insertRow（总行长）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
var cell5=行插入单元格（4）；
cell1.innerHTML=ingrList[i][k]。名称；
单元格2.追加子项（表金额）；
tableAmount.value=eval（ingrList[i][k].金额）；
cell3.innerHTML=ingrList[i][k].amountType；
单元格4.追加子项（tableCalNum）；
tableCalNum.value=ingrList[i][k].cal；
}
}
}
}
let button=document.getElementById（“按钮”）；
让deleteBtn=document.createElement（“按钮”）；
deleteBtn.innerHTML=“删除”；
按钮。追加子项（删除BTN）；
deleteBtn.addEventListener（“单击”，函数（）{
for（设i=0；i

成分
数量
卡路里
您的问题是，当您删除第1行时，第2行将成为新的第1行，您将移动到下一行，删除第2行（原来的第3行）

解决此问题的一种方法是从删除最后一行开始，然后返回到开头

deleteBtn.addEventListener("click", function () {
  for (let i = ingrTable.rows.length - 1; i > 0; i--) {
    ingrTable.deleteRow(i);
  }
});

另一种更快的方法是仅用标题替换html，而不是删除所有行：

deleteBtn.addEventListener（“单击”），函数（）{
IngerTable.innerHTML=IngerTable.rows[0]。innerHTML
});