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