J'essaie de créer 2 tables HTML à partir de 2 tableaux de données JavaScript différents.
La première table est bien construite et la structure est superbe, mais la deuxième table n'est pas remplie de données.
J'ai essayé d'ajuster le nom mais je pense que c'est parce qu'il cherche "tbody" les deux fois.
Existe-t-il une autre variable pour ajuster cela, ou peut-être une meilleure façon d'obtenir 2 tables distinctes à partir de 2 tableaux de données différents ?
J'ai échangé le nom et ajouté des balises d'identification au corps, aucun changement. J'allais à l'origine renommer la table de données, mais il semble que la construction de la deuxième table qui saisit le corps redimensionne simplement le premier corps.
<div style="float: left;margin-right:10px">
<table>
<thead>
<tr align="center">
<th><h3>Name</h3></th>
<th><h3>Time</h3></th>
<th><h3>Temp</h3></th>
<th><h3>Peel</h3></th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
<script>
const data = [
{name: "Apple", time: "25sec", temp: "100F", peel: "Peeler"},
{name: "Orange", time: "50sec", temp: "200F", peel: "Knife"},
]
const table = document.querySelector('tbody')
data.forEach((item) => {
table.insertAdjacentHTML( 'beforeend', `<tr>
<td>${item.name}</td>
<td>${item.time}</td>
<td>${item.temp} </td>
<td>${item.peel}</td>
</tr>`)
})
</script>
<div style="float: left">
<table>
<thead>
<tr align="center">
<th><h3>Name</h3></th>
<th><h3>Time</h3></th>
<th><h3>Temp</h3></th>
<th><h3>Peel</h3></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script>
<script>
const data = [
{name: "Apple", time: "25sec", temp: "100F", peel: "Peeler"},
{name: "Orange", time: "50sec", temp: "200F", peel: "Knife"},
]
const table = document.querySelector('tbody')
data.forEach((item) => {
table.insertAdjacentHTML( 'beforeend', `<tr>
<td>${item.name}</td>
<td>${item.time}</td>
<td>${item.temp}</td>
<td>${item.peel}</td>
</tr>`)
})
</script> 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il y a quelques problèmes avec votre code. Vous réévaluez leurs valeurs dans la première balise
<script>标记中将data和table声明为常量，然后尝试在第二个<script>. (Les variables constantes ne peuvent pas être réaffectées). De plus, l'élémentdocument.querySelector('tbody')将始终选择在页面上找到的第一个<tbody>. Cela entraînera la sélection de la même table deux fois.C'est ainsi que j'ai refactorisé ce code, mais il existe d'innombrables façons de résoudre ce problème.
Envisagez d'extraire la création de ligne dans une fonction et de donner aux deux éléments du corps un identifiant unique pour les différencier.
function addRows(tbody, data) { data.forEach((item) => { tbody.insertAdjacentHTML('beforeend', `
${item.name}
${item.time}
${item.temp}
${item.peel}
`)
});
}
const data1=[{name:"Apple",time:"25sec",temp:"100F",peel:"Peeler"},{name:"Orange",time:"50sec",temp:"200F",peel:"Knife"},];
const tbody1 = document.querySelector('#tbody1');
addRows(tbody1, data1);
const data2=[{name:"Apple",time:"25sec",temp:"100F",peel:"Peeler"},{name:"Orange",time:"50sec",temp:"200F",peel:"Knife"},];
const tbody2 = document.querySelector('#tbody2');
addRows(tbody2, data2);