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

Question

我有一个 table，它是通过从存储在 localStorage 中的数组获取内容而动态生成的。

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

第一次脚本运行s，下面是生成的内容：

第二次相同的脚本是运行，生成的内容如下：

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

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:

<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 BEFORE 运行ning 中现有呈现的 table table 生成脚本。

在我的脚本下方查找以清除行：

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);

}

在脚本运行之前，table 看起来像这样：

在这个脚本之后运行我看到了这个：

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

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

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

//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>

Answer 2

清空 table 的正文 <tbody>，排除 table <thead>。我给 table 正文 <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>

在动态 table 脚本的开头，我运行一个脚本读取 table 主体的值：<tbody id="tableBodyContent">，将其无效，然后用默认值重置它。

查看下面更新的脚本：

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]];
        }
 }
}

上面的脚本console.logs:

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>

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

How do I clear the rows in dynamically generated table?

html

javascript

arrays

for-loop

delete-row