2개의 별도 자바스크립트 배열을 기반으로 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>

<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> 요소도 있습니다. 그러면 동일한 테이블이 두 번 선택됩니다.

으아아아

이렇게 코드를 리팩토링했는데, 이 문제를 해결하는 방법은 셀 수 없이 많습니다.

Answer 2

행 생성을 함수로 추출하고 두 tbody 요소에 고유 ID를 부여하여 차별화하는 것을 고려해 보세요.

으아아아 으아아아