HTML 表格在每次提交点击时都会重复内容

Question

我的程序采用.csv文件，从中读取信息并将其发送到js中的HTML表。此外，我还有用于未来操作的输入字段。它可以通过输入的过滤器在整个表中搜索数据。问题是，如果表格已经生成，并且我再次单击“提交”，我的表格会再次出现并创建副本（如图所示）问题是如何使其不在提交时复制.html：

P粉384366923 · Answer

已经找到解决方案

在评论部分已经建议了replaceChildren方法，但我决定使用
.innerHTML = ''代替

因此，当提交事件发生时，表格内容会被 innerHTML = '' if isn't 擦除

这是 js 代码现在的样子：

const inputForm = document.getElementById("input-form")
const file = document.getElementById("file-choose")
const filterInput = document.getElementById("test-input")

let table = document.createElement("table")
let thead = document.createElement("thead")
let tbody = document.createElement("tbody")

function csvToArray(str, delimiter=',') {
   const headers = str.slice(0, str.indexOf("
")).split(delimiter)
   const rows = str.slice(str.indexOf("
") + 1).split("
")

   headers.pop()

   const arr = rows.map((row) => {
      const values = row.split(delimiter)
      const element = headers.reduce((object, header, index) => {
         object[header] = values[index]
         return object
      }, {})
      return element
   })

   return arr
}

inputForm.addEventListener("submit", (e) => {
   e.preventDefault()

///////////////
   table.innerHTML = ''
   thead.innerHTML = ''
   tbody.innerHTML = ''
///////////////\

   const input = file.files[0]
   const reader = new FileReader()

   reader.onload = function(e) {
      const text = e.target.result
      const data = csvToArray(text)
      
      table.appendChild(thead)
      table.appendChild(tbody)

      document.getElementById('data-table').appendChild(table)
      
      let hrow = document.createElement('tr')
      for (let i = 0; i

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程