Générer 2 tables basées sur 2 tableaux javascript distincts

Question

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>

Answer 1

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ément document.querySelector('tbody') 将始终选择在页面上找到的第一个 <tbody>. Cela entraînera la sélection de la même table deux fois.

    

       

        

            
Name
            
Time
            
Temp
            
Peel
        
       
       

    



    

       

        

            
Name
            
Time
            
Temp
            
Peel
        
       
       

    


sssccc

C'est ainsi que j'ai refactorisé ce code, mais il existe d'innombrables façons de résoudre ce problème.

Answer 2

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);

    

       

        

            
Name
            
Time
            
Temp
            
Peel
        
       
       

    


    

       

        

            
Name
            
Time
            
Temp
            
Peel