HTML 表格在每次提交点击时都会重复内容-PHP中文网问答

我的程序采用 .csv 文件，从中读取信息并将其发送到 js 中的 HTML 表。此外，我还有用于未来操作的输入字段。它可以通过输入的过滤器在整个表中搜索数据。

问题是，如果表格已经生成，并且我再次单击“提交”，我的表格会再次出现并创建副本（如图所示）

问题是如何使其不在提交时复制

.html：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Excel Transform Site</title>
      <link rel="stylesheet" href="./excel-transfrom.css">
   </head>
   <body>
      <form id="input-form">
         <input type="file" id="file-choose" apply=".csv">

         <label class="test-input-label">Test Input</label>
         <input type="text" id="test-input">
         <input type="submit" value="Submit" class="submit-button">
      </form><br>

      <table id="data-table"></table>

      <script src="./excel-transform.js"></script>
   </body>
</html>

.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("\n")).split(delimiter)
   const rows = str.slice(str.indexOf("\n") + 1).split("\n")

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

   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 < Object.keys(data[0]).length; i++) {
         let theader = document.createElement('th')

         theader.innerHTML = Object.keys(data[0])[i]
         hrow.appendChild(theader)
      }
      thead.appendChild(hrow)

      for (let i = 0; i < data.length; i++) {
         let drow = document.createElement('tr')
         console.log(data[i])
         for (let j = 0; j < Object.values(data[i]).length; j++) {
            let tdata = document.createElement('td')

            tdata.innerHTML = Object.values(data[i])[j]

            drow.appendChild(tdata)
         }
         tbody.appendChild(drow)
      }
   }

   reader.readAsText(input)
})

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("\n")).split(delimiter) const rows = str.slice(str.indexOf("\n") + 1).split("\n") 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