在svelte中用js数据填充htmltable

Question

我正在按照此视频中的教程进行操作 https://www.youtube.com/watch?v=XmdOZ5NSqb8，并且我在我的 svelte 项目中复制了所有像他一样的东西来尝试，但是由于某种原因，当我运行代码。但是，如果我注释掉该部分，我会看到 table 的 header。在网页的控制台中，我得到这个：“Uncaught TypeError: table is null”。是因为我做错了什么还是因为它与 svelte 不同？我也通读了这个：Create HTML table from JavaScript object 但在我看来，它说的和视频教程是一样的。

我不确定我是否已经尝试寻找解决方案太久了，我没有看到明显的东西，或者这对我来说是否是新事物，无论如何感谢您的帮助。如果你想尝试一下，这是代码

干杯

<script>
var myArray = [
        {"name":"Bob", "age":"30", "birthday":"11/10/1990"},
        {"name":"Dan", "age":"40", "birthday":"11/10/1980"},
        {"name":"Thierry", "age":"50", "birthday":"11/10/1970"},
        {"name":"Patrick", "age":"60", "birthday":"11/10/1960"},
    ]


buildTable(myArray)

function buildTable(data){
    var table = document.getElementById("myTable")

    for (var i = 0; i < data.length; i++){
        var row = `<tr>
                        <td>${data[i].name}</td>
                        <td>${data[i].age}</td>
                        <td>${data[i].birthday}</td>
                  </tr>`
        table.innerHTML += row
    }
}

</script>

<table class="content-table buyside">
    <tr>

        <th>Name</th>
        <th>Age</th>
        <th>Birthday</th>
    </tr>

    <tbody id="myTable">
    </tbody>

</table>

Answer 1

App.svelte

<script>
    const myArray = [
        {"name":"Bob", "age":"30", "birthday":"11/10/1990"},
        {"name":"Dan", "age":"40", "birthday":"11/10/1980"},
        {"name":"Thierry", "age":"50", "birthday":"11/10/1970"},
        {"name":"Patrick", "age":"60", "birthday":"11/10/1960"},
     ]
</script>

<table class="content-table buyside">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Birthday</th>
  </tr>
  {#each myArray as data}
     <tr>
        <td>{data.name}</td>
        <td>{data.age}</td>
        <td>{data.birthday}</td>
      </tr>`
  {/each}
</table>

在svelte中用js数据填充htmltable

Fill html table with js data in svelte

svelte