Generieren Sie zwei Tabellen basierend auf zwei separaten Javascript-Arrays

Question

Ich versuche, 2 HTML-Tabellen aus 2 verschiedenen JavaScript-Datenarrays zu erstellen.

Die erste Tabelle ist gut aufgebaut und die Struktur sieht gut aus, aber die zweite Tabelle ist nicht mit Daten gefüllt.

Ich habe versucht, die Benennung anzupassen, aber ich denke, weil beide Male nach „tbody“ gesucht wird.

Gibt es eine andere Variable, um dies anzupassen, oder vielleicht eine bessere Möglichkeit, zwei separate Tabellen aus zwei verschiedenen Datenarrays zu erhalten?

Ich habe die Benennung vertauscht und dem Körper ID-Tags hinzugefügt, keine Änderung. Ursprünglich wollte ich die Datentabelle umbenennen, aber es scheint, dass die Konstruktion der zweiten Tabelle, die den Tbody erfasst, nur die Größe des ersten Tbody ändert.

<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

您的代码存在一些问题。 您在第一个 <script> 标记中将 data 和 table 声明为常量，然后尝试在第二个 <script> 标记中重新评估它们的值。 （常量变量不能重新赋值）。 此外，document.querySelector('tbody') 将始终选择在页面上找到的第一个 <tbody> 元素。这将导致选择同一个表两次。

    

       

        

            
Name
            
Time
            
Temp
            
Peel
        
       
       

    



    

       

        

            
Name
            
Time
            
Temp
            
Peel
        
       
       

    

这就是我重构这段代码的方式，但是有无数种方法可以解决这个问题。

Answer 2

考虑将行创建提取到函数中，并为两个 tbody 元素提供唯一的 ID 来区分它们。

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