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)
})
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Sudah jumpa penyelesaiannya
Sudah dicadangkan
replaceChildren方法，但我决定使用.innerHTML = ''di ruangan komen sebaliknyaJadi apabila acara hantar berlaku, kandungan jadual akan dipadamkan
innerHTML = ''jika tidakBeginilah 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