Mon programme prend un fichier .csv, en lit les informations et les envoie à un tableau HTML en js. De plus, j'ai des champs de saisie pour les actions futures. Il peut rechercher des données dans toute la table selon le filtre saisi.
Le problème est que si le formulaire est déjà généré et que je clique à nouveau sur "Soumettre", mon formulaire apparaît à nouveau et une copie est créée (comme indiqué sur l'image)
Le problème est de savoir comment faire en sorte qu'il ne soit pas copié lors du commit
.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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai déjà trouvé la solution
Déjà suggéré
replaceChildren方法，但我决定使用.innerHTML = ''dans la section commentaires à la placeAinsi, lorsque l'événement de soumission se produit, le contenu de la table sera effacé
innerHTML = ''si ce n'est pas le casVoici à quoi ressemble maintenant le code 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