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

Question

我有一个通过从存储在 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]];
            }
     }
}   

这是我的表格 HTML 代码:

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

为了解决这个问题，我正在尝试编写一个脚本，在运行表生成脚本之前清除 DOM 中现有的渲染表。

在下面找到我的脚本以清除行:

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

for (var i = rowCount; i > 0; i--) {
    table.deleteRow(i);

}

在脚本运行之前，表格如下所示:

运行此脚本后，我看到以下内容:

...我还收到以下错误消息:

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

有人可以指出我的脚本有什么问题以及如何解决此问题吗？

Answer 1

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

//var array = JSON.parse(localStorage.getItem('transactionData'));

// mocking localStorage items
const array = [{
    status: 10,
    amount: 20,
    time: 30
  },
  {
    status: 20,
    amount: 30,
    time: 40
  },
  {
    status: 30,
    amount: 40,
    time: 50
  },
  {
    status: 40,
    amount: 50,
    time: 60
  },
  {
    status: 50,
    amount: 60,
    time: 70
  }
]

var tbody = document.querySelectorAll(".table tbody")[0];

// creating the table
function addTableRows(arr, container) {
  let html = ''
  arr.forEach(e => html += `<tr>${createTableRow(e)}</tr>`)
  return html
}

// creating a single row (tr) of the table
function createTableRow(obj) {
  return `<td>${obj.status}</td><td>${obj.amount}</td><td>${obj.time}</td>`
}

// initializing table
tbody.innerHTML = addTableRows(array, tbody)

// removing rows
document.getElementById('removeRows').addEventListener('click', function(e) {
  tbody.innerHTML = ''
})

// adding rows
document.getElementById('addRows').addEventListener('click', function(e) {
  tbody.innerHTML = addTableRows(array, tbody)
})

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

  </tbody>
</table>

<button id="addRows">Add rows</button></br>
<button id="removeRows">Remove rows</button>