Hasilkan 2 jadual berdasarkan 2 tatasusunan javascript yang berasingan

Question

Saya cuba membina 2 jadual html daripada 2 tatasusunan data JavaScript yang berbeza.

Jadual pertama dibina dengan baik dan strukturnya kelihatan hebat, tetapi jadual kedua tidak diisi dengan data.

Saya cuba melaraskan penamaan tetapi saya rasa kerana ia mencari "tubuh" kedua-dua kali.

Adakah terdapat pembolehubah lain untuk melaraskan ini, atau mungkin cara yang lebih baik untuk mendapatkan 2 jadual berasingan daripada 2 tatasusunan data yang berbeza?

Saya menukar penamaan dan menambah tag ID pada badan, tiada perubahan. Saya pada asalnya akan menamakan semula jadual data, tetapi nampaknya pembinaan jadual kedua yang merebut tbody hanya mengubah saiz tbody pertama.

<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

Terdapat beberapa isu dengan kod anda. Anda menilai semula nilai mereka dalam teg <script> 标记中将 data 和 table 声明为常量，然后尝试在第二个 <script> pertama. (Pembolehubah malar tidak boleh ditugaskan semula). Selain itu, unsur document.querySelector('tbody') 将始终选择在页面上找到的第一个 <tbody>. Ini akan menyebabkan pemilihan jadual yang sama dua kali.

    

       

        

            
Name
            
Time
            
Temp
            
Peel
        
       
       

    



    

       

        

            
Name
            
Time
            
Temp
            
Peel
        
       
       

    


sssccc

Beginilah cara saya memfaktorkan semula kod ini, tetapi terdapat banyak cara untuk menyelesaikan masalah ini.

Answer 2

Pertimbangkan untuk mengekstrak penciptaan baris ke dalam fungsi dan memberikan kedua-dua elemen tbody ID unik untuk membezakannya.

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