使用 JavaScript 更改或清除 html table

Question

我正在使用以下代码构建 html table 并将其发送到我的页面：

function generateTableHead(table, data) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    for (let key of data) {
      let th = document.createElement("th");
      let text = document.createTextNode(key);
      th.appendChild(text);
      row.appendChild(th);
    }
  }

function generateTable(table, data) {
    for (let element of data) {
      let row = table.insertRow();
      for (key in element) {
        let cell = row.insertCell();
        let text = document.createTextNode(element[key]);
        cell.appendChild(text);
      }
    }
  }

这组函数在页面初始呈现时调用，并且在每次更改下拉菜单时调用的另一个函数中。这导致堆叠的 tables 而不是更改的 tables。我知道这是因为我将文本附加到已经包含 table 的 html 位置。在生成新的函数之前，我可以在函数的开头放置几行代码来清除旧的 table，还是我对这个问题的思考完全错误？

Answer 1

我这里缺少上下文，但您可以清除 HTML 元素的 HTML 内容，将内部 HTML 设置为空字符串：

const table = document.getElementById('table')
table.innerHTML = ''

使用 JavaScript 更改或清除 html table

Changing or clearing html table with JavaScript

javascript

html

html-table

onchange