2 つの別々の JavaScript 配列に基づいて 2 つのテーブルを生成します

Question

2 つの異なる JavaScript データ配列から 2 つの HTML テーブルを構築しようとしています。

最初のテーブルはうまく構築されており、構造も素晴らしく見えますが、2 番目のテーブルにはデータが入力されていません。

名前を調整しようとしましたが、どちらも「tbody」を探しているためだと思います。

これを調整する別の変数はありますか、それとも 2 つの異なるデータ配列から 2 つの別々のテーブルを取得するより良い方法はありますか?

名前を交換し、変更を加えずに ID タグを tbody に追加しました。当初はデータテーブルの名前を変更するつもりでしたが、tbodyを取得する2番目のテーブルの構築により、最初のtbodyのサイズが変更されるだけのようです。

<div style="float: left;margin-right:10px">
    <テーブル>
       <頭>
        <tr align="center">
            <th><h3>名前</h3></th>
            
時刻
            
温度
            
皮をむきます
        </tr>
       </頭>
       <tbody id="tbody"></tbody>
    </テーブル>
</div>

<スクリプト>
定数データ = [
        {名前: "リンゴ"、時間: "25秒"、温度: "100°F"、皮むき: "ピーラー"}、
        {名前: "オレンジ"、時間: "50秒"、温度: "200°F"、皮をむく: "ナイフ"}、
        ]

    const table = document.querySelector('tbody')

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

            </tr>`)
    })

</スクリプト>



<div style="float: left">
    <テーブル>
       <頭>
        <tr align="center">
            <th><h3>名前</h3></th>
            
時刻
            
温度
            
皮をむきます
        </tr>
       </頭>
       <tbody></tbody>
    </テーブル>
</div>

<スクリプト>


<スクリプト>
定数データ = [
        {名前: "リンゴ"、時間: "25秒"、温度: "100°F"、皮むき: "ピーラー"}、
        {名前: "オレンジ"、時間: "50秒"、温度: "200°F"、皮をむく: "ナイフ"}、
        ]


    const table = document.querySelector('tbody')

    data.forEach((項目) => {
        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 を定数として宣言し、2 番目の <script> を使用しようとしています。タグを使用して値を再評価します。 (定数変数は再割り当てできません)。 さらに、document.querySelector('tbody') は常に、ページ上で見つかった最初の <tbody> 要素を選択します。これにより、同じテーブルが 2 回選択されることになります。

    
            ＃＃＃＃＃＃名前＃＃＃＃＃＃
            ＃＃＃＃＃＃時間＃＃＃＃＃＃
            
            ＃＃＃＃＃＃皮＃＃＃＃＃＃
        温度
            ＃＃＃＃＃＃皮＃＃＃＃＃＃
        

       

        
温度

       

       

    




    
       

        

            ＃＃＃＃＃＃名前＃＃＃＃＃＃
            ＃＃＃＃＃＃時間＃＃＃＃＃＃
            


       
       

    







これが私がこのコードをリファクタリングした方法ですが、この問題を解決する方法は無数にあります。 

Answer 2

行の作成を関数に抽出し、両方の tbody 要素に一意の ID を与えて区別することを検討してください。

関数 addRows(tbody, data) {
    data.forEach((項目) => {
        tbody.insertAdjacentHTML('beforeend', `
                ${アイテム.名}
        ${アイテム.時間}
                ${item.temp} 
                ${アイテム.ピール}

            `)
    });
}
const data1=[{name:"Apple",time:"25sec",temp:"100F",peel:"ピーラー"},{name:"オレンジ",time:"50sec",temp:"200F",peel ："ナイフ"}、];
const tbody1 = document.querySelector('#tbody1');
addRows(tbody1, data1);
const data2=[{name:"Apple",time:"25sec",temp:"100F",peel:"ピーラー"},{name:"オレンジ",time:"50sec",temp:"200F",peel ："ナイフ"}、];
const tbody2 = document.querySelector('#tbody2');
addRows(tbody2, data2);

    
            ＃＃＃＃＃＃名前＃＃＃＃＃＃
            ＃＃＃＃＃＃時間＃＃＃＃＃＃
            
            ＃＃＃＃＃＃皮＃＃＃＃＃＃
        温度
            ＃＃＃＃＃＃皮＃＃＃＃＃＃
        

       

        
温度

       

       

    



    
       

        

            ＃＃＃＃＃＃名前＃＃＃＃＃＃
            ＃＃＃＃＃＃時間＃＃＃＃＃＃