提交按钮重复生成HTML表格问题求助

你遇到的重复生成表格问题，根源在于全局创建的table、thead、tbody元素被重复复用，且每次提交都会往页面容器里重复添加table。每次点击Submit时，旧的表头和数据行没有被清除，新的内容又追加进去，同时table元素被多次插入到data-table容器中，导致出现重复表格。

方案一：每次提交重新生成表格元素（推荐） #

修改JavaScript代码，在每次提交时先清空表格容器，再重新创建所有表格元素并填充内容，确保每次都是全新的表格：

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

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]
   if (!input) return

   const reader = new FileReader()

   reader.onload = function(e) {
      const text = e.target.result
      const data = csvToArray(text)
      
      // 清空表格容器的现有内容
      const tableContainer = document.getElementById('data-table')
      tableContainer.innerHTML = ''

      // 重新创建表格、表头、表体元素
      const table = document.createElement("table")
      const thead = document.createElement("thead")
      const tbody = document.createElement("tbody")

      // 生成表头
      const headerRow = document.createElement('tr')
      Object.keys(data[0]).forEach(headerText => {
         const headerCell = document.createElement('th')
         headerCell.textContent = headerText
         headerRow.appendChild(headerCell)
      })
      thead.appendChild(headerRow)

      // 生成数据行
      data.forEach(rowData => {
         const dataRow = document.createElement('tr')
         Object.values(rowData).forEach(cellText => {
            const dataCell = document.createElement('td')
            dataCell.textContent = cellText
            dataRow.appendChild(dataCell)
         })
         tbody.appendChild(dataRow)
      })

      // 组装表格并添加到容器
      table.appendChild(thead)
      table.appendChild(tbody)
      tableContainer.appendChild(table)
   }

   reader.readAsText(input)
})

修改说明： #

• 将table、thead、tbody的创建移到reader.onload内部，每次提交都生成全新的元素，避免复用旧内容
• 生成新表格前，通过tableContainer.innerHTML = ''清空容器，彻底移除旧表格
• 增加文件选择判断，避免未选文件时执行后续代码报错
• 改用forEach循环替代for循环，代码更简洁易读

方案二：复用现有表格元素，清空旧内容 #

如果想保留全局的表格元素，可通过清空表头和表体的内容来避免重复：

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

// 全局创建表格元素，只添加一次到容器
const table = document.createElement("table")
const thead = document.createElement("thead")
const tbody = document.createElement("tbody")
table.appendChild(thead)
table.appendChild(tbody)
const tableContainer = document.getElementById('data-table')
tableContainer.appendChild(table)

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]
   if (!input) return

   const reader = new FileReader()

   reader.onload = function(e) {
      const text = e.target.result
      const data = csvToArray(text)
      
      // 清空旧的表头和数据内容
      thead.innerHTML = ''
      tbody.innerHTML = ''

      // 生成新表头
      const headerRow = document.createElement('tr')
      Object.keys(data[0]).forEach(headerText => {
         const headerCell = document.createElement('th')
         headerCell.textContent = headerText
         headerRow.appendChild(headerCell)
      })
      thead.appendChild(headerRow)

      // 生成新数据行
      data.forEach(rowData => {
         const dataRow = document.createElement('tr')
         Object.values(rowData).forEach(cellText => {
            const dataCell = document.createElement('td')
            dataCell.textContent = cellText
            dataRow.appendChild(dataCell)
         })
         tbody.appendChild(dataRow)
      })
   }

   reader.readAsText(input)
})

修改说明： #

• 全局表格元素只创建并添加到容器一次，避免重复插入
• 每次提交前通过thead.innerHTML = ''和tbody.innerHTML = ''清空旧内容，再填充新数据

内容的提问来源于stack exchange，提问作者user11891672