我的程式採用 .csv 文件，從中讀取資訊並將其發送到 js 中的 HTML 表。 此外，我還有用於未來操作的輸入欄位。它可以透過輸入的過濾器在整個表中搜尋資料。
問題是，如果表格已經生成，並且我再次單擊“提交”，我的表格會再次出現並建立副本（如圖所示）
問題是如何使其不在提交時複製
.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粉3843669232024-02-22 16:04:35
已經找到解決方案
#在評論部分已經建議了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 < 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)
})