recherche

Maison  >  Questions et réponses  >  le corps du texte

Le tableau HTML répète le contenu à chaque clic de soumission

Mon programme prend un fichier .csv, en lit les informations et les envoie à un tableau HTML en js. De plus, j'ai des champs de saisie pour les actions futures. Il peut rechercher des données dans toute la table selon le filtre saisi.

Le problème est que si le formulaire est déjà généré et que je clique à nouveau sur "Soumettre", mon formulaire apparaît à nouveau et une copie est créée (comme indiqué sur l'image)

Le problème est de savoir comment faire en sorte qu'il ne soit pas copié lors du commit

.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粉706038741273 Il y a quelques jours427

répondre à tous(1)je répondrai

  • P粉384366923

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

    J'ai déjà trouvé la solution

    Déjà suggéré replaceChildren方法，但我决定使用
    .innerHTML = ''dans la section commentaires à la place

    Ainsi, lorsque l'événement de soumission se produit, le contenu de la table sera effacé innerHTML = '' si ce n'est pas le cas

    Voici à quoi ressemble maintenant le code 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)
})

    répondre
    0
  • Annulerrépondre