suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Die HTML-Tabelle wiederholt den Inhalt bei jedem Senden-Klick

Mein Programm nimmt eine .csv-Datei, liest Informationen daraus und sendet sie an eine HTML-Tabelle in js. Zusätzlich habe ich Eingabefelder für zukünftige Aktionen. Mithilfe des eingegebenen Filters kann die gesamte Tabelle nach Daten durchsucht werden.

Das Problem ist, dass, wenn das Formular bereits generiert ist und ich erneut auf „Senden“ klicke, mein Formular erneut erscheint und eine Kopie erstellt wird (wie im Bild gezeigt)

Das Problem ist, wie man dafür sorgt, dass es beim Festschreiben nicht kopiert wird

.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)
})

P粉706038741P粉706038741313 Tage vor467

Antworte allen(1)Ich werde antworten

  • P粉384366923

    P粉3843669232024-02-22 16:04:35

    已经找到解决方案

    在评论部分已经建议了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("\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 < 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)
})

    Antwort
    0
  • StornierenAntwort