基於 2 個獨立的 javascript 陣列產生 2 個表

Question

我正在嘗試從 2 個不同的 JavaScript 資料數組建立 2 個 html 表。

第一個表構建得很好，結構看起來很棒，但第二個表沒有填充資料。

我嘗試調整命名，但我認為因為它兩次都在尋找“tbody”。

是否有另一個變數來調整這個，或者也許有更好的方法從 2 個不同的資料數組中獲得 2 個單獨的表？

我交換了命名並向 tbody 添加了 ID 標籤，結果沒有變化。我本來打算重新命名資料表，但似乎抓取 tbody 的第二個表的構造只是調整第一個 tbody。

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

<腳本>


<腳本>
常量資料 = [
        {名稱：“蘋果”，時間：“25秒”，溫度：“100F”，削皮：“削皮器”}，
        {名稱：“橘子”，時間：“50秒”，溫度：“200F”，果皮：“刀”}，
        ]


    const table = document.querySelector('tbody')

    data.forEach((項目) => {
        table.insertAdjacentHTML( 'beforeend', `;
                <td>${item.name}</td>
                <td>${item.time}</td>
                <td>${item.temp}</td>
                <td>${item.peel}</td>
            </tr>`)
    })

</腳本>

#

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