cari

Rumah  >  Soal Jawab  >  teks badan

Jadual HTML mengulangi kandungan pada setiap klik serahan

Program saya mengambil fail .csv, membaca maklumat daripadanya dan menghantarnya ke jadual HTML dalam js. Selain itu, saya mempunyai medan input untuk tindakan masa hadapan. Ia boleh mencari seluruh jadual untuk data dengan penapis yang dimasukkan.

Masalahnya ialah jika borang sudah dijana dan saya klik "Submit" sekali lagi, borang saya muncul semula dan salinan dibuat (seperti yang ditunjukkan dalam gambar)

Masalahnya ialah bagaimana untuk menjadikannya bukan salinan atas komitmen

.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 hari yang lalu423

membalas semua(1)saya akan balas

  • P粉384366923

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

    Sudah jumpa penyelesaiannya

    Sudah dicadangkan replaceChildren方法，但我决定使用
    .innerHTML = ''di ruangan komen sebaliknya

    Jadi apabila acara hantar berlaku, kandungan jadual akan dipadamkan innerHTML = '' jika tidak

    Beginilah rupa kod js sekarang: 

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

    balas
    0
  • Batalbalas