Javascript 如何清除动态生成的表中的行？

我有一个表，它是通过从存储在

localStorage

中的数组中获取内容动态生成的

不幸的是，我注意到每次运行脚本时，它都会附加到DOM中的现有表中，如下图所示：

脚本第一次运行时，将生成以下内容：

第二次运行同一脚本时，将生成以下内容：

在下面找到生成上表的脚本：

var array = JSON.parse(localStorage.getItem('transactionData'));
var table = document.getElementById("table");

for (var i = 0; i < array.length; i++) {
    var newRow = table.insertRow(table.length);             
    currentTransaction = array[i];

    for (var b = 0; b < keys.length; b++) {
        var cell = newRow.insertCell(b);
        cell.innerText = currentTransaction[keys[b]];

        if (keys[b] == "statusIcon") {
           console.log("keys[b] value is: " +currentTransaction[keys[b]] );
           cell.innerHTML = currentTransaction[keys[b]];
            } 
       else {
           cell.innerText = currentTransaction[keys[b]];
            }
     }
}   

在运行脚本之前，该表如下所示：

运行此脚本后，我看到：

…我还收到以下错误消息：

Uncaught DOMException: Failed to execute 'deleteRow' on 'HTMLTableElement':
The index provided (5) is greater than the number of 
rows in the table (5).

---

有人能指出我的脚本有什么问题吗？我该如何解决这个问题？

我认为您应该重新构建代码。使用下面的代码段，您可以在需要时添加代码，也可以在需要时清除表。如果您想删除单行，那么我建议给它们一个ID（在localStorage中）并在表行上使用它

//var array=JSON.parse（localStorage.getItem（'transactionData'）；
//模拟本地存储项
常量数组=[{
现状：10，
金额：20，
时间:30
},
{
现状：20，
金额：30，
时间：40
},
{
现状：30，
金额：40，
时间：50
},
{
现状：40，
金额：50，
时间：60
},
{
现状：50，
金额：60，
时间：70
}
]
var tbody=document.queryselectoral（“.table tbody”）[0]；
//创建表
函数addTableRows（arr，容器）{
让html=''
arr.forEach（e=>html+=`${createTableRow（e）}`）
返回html
}
//创建表的单行（tr）
函数createTableRow（obj）{
返回`${obj.status}${obj.amount}${obj.time}`
}
//初始化表
tbody.innerHTML=addTableRows（数组，tbody）
//删除行
document.getElementById（'removeRows'）。addEventListener（'click'，函数（e）{
tbody.innerHTML=“”
})
//添加行
document.getElementById（'addRows'）。addEventListener（'click'，函数（e）{
tbody.innerHTML=addTableRows（数组，tbody）
})

地位
数量
时间
添加行

删除行以清空表格的正文，不包括表格
。
我给了表体一个
id=“tableBodyContent”

在下面查看更新的HTML代码：

<table class="table table-striped" id="table">
  <thead>
    <tr>
      <th>Status</th>
      <th>Amount</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody id="tableBodyContent">
    <tr>
    </tr>
  </tbody>
</table>

在localStorage中存储表的代码部分在哪里？为了防止出现错误，您可能应该执行
rowCount=array.length-1
，但是为什么不直接设置
document.getElementById（“table”）.innerHTML=null
？@exside谢谢，但是
rowCount=array.length-1
不起作用，我不得不将数字减少到
-3
如下
rowCount=array.length-3用于清除表格。此外，尽管
document.getElementById（“表”）.innerHTML=null
解决方案是一个很好的解决方案，我之所以不使用它，是因为这会删除整个表以及我需要保留的
行。为什么不将数据单元格放在
tbody
标记中，然后您可以将
null
移出表体，无需循环=）…感谢您的快速响应。你在正确的轨道上。我只想清理一下我的桌子。因此，我认为在浏览器控制台中运行的代码
tbody.innerHTML='
会删除表体，但它没有。我缺少什么？我提供的代码清除了RemoveOWS（）函数中的tbody元素。tbody仅在代码段中是一个变量-您应该在Chrome开发控制台中放入
document.queryselectoral（“.table tbody”）[0]。innerHTML='
，并查看它是否清除了表体。
Uncaught DOMException: Failed to execute 'deleteRow' on 'HTMLTableElement':
The index provided (5) is greater than the number of 
rows in the table (5).

<table class="table table-striped" id="table">
  <thead>
    <tr>
      <th>Status</th>
      <th>Amount</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody id="tableBodyContent">
    <tr>
    </tr>
  </tbody>
</table>

var bodyContent = document.getElementById("tableBodyContent");
console.log("Check this out: " +bodyContent.innerHTML);
bodyContent.innerHTML = "";
bodyContent.innerHTML = "<tr> </tr>";


var array = JSON.parse(localStorage.getItem('transactionData'));
var table = document.getElementById("table");

for (var i = 0; i < array.length; i++) {
var newRow = table.insertRow(table.length);             
currentTransaction = array[i];

for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    cell.innerText = currentTransaction[keys[b]];

    if (keys[b] == "statusIcon") {
       console.log("keys[b] value is: " +currentTransaction[keys[b]] );
       cell.innerHTML = currentTransaction[keys[b]];
        } 
   else {
       cell.innerText = currentTransaction[keys[b]];
        }
 }
}  

Check this out: <tr> </tr><tr><td><i class="fas fa-check-circle colorBlue">
</i></td><td>10</td><td>10:37am, Sun</td></tr><tr><td><i class="fas fa-
exclamation-triangle colorRed"></i></td><td>50000</td><td>10:36am, Sun</td>
</tr><tr><td><i class="fas fa-exclamation-triangle colorYellow"></i></td>
<td>50000</td><td>10:35am, Sun</td></tr><tr><td><i class="fas fa-exclamation-
triangle colorYellow"></i></td><td>60000</td><td>10:33am, Sun</td></tr><tr>
<td><i class="fas fa-exclamation-triangle colorRed"></i></td><td>50</td>
<td>10:25am, Sun</td></tr><tr><td><i class="fas fa-exclamation-triangle 
colorRed"></i></td><td>6332</td><td>10:24am, Sun</td></tr>