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)
})
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
已经找到解决方案
在评论部分已经建议了
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