用for循环JS填充HTML表

Question

我正在尝试用 JavaScript function 填充 HTML 表。 我有一个 html 元素，我在其中创建了表格，我将从后端端点获取数据，这就是我尝试动态添加日期的原因。

<script>
    const items = [
            {item: "Americano", quantity: 1, total: "12.52 sar"  },
            {item: "Frape", quantity: 3, total: "13.40 sar"  },
            {item: "Espresso", quantity: 2, total: "10.12 sar"  },
    ];

    for (let i = 0; i < items.length; i++) {
        let item = document.getElementById("item");
        let quantity = document.getElementById("quantity");
        let total = document.getElementById("total");
    }

</script>


<table id="table">
    <tr>
      <th >Item</th>
      <th>Quantity</th>
      <th >Total</th>
    </tr>
    <tr>
        <td id="item"></td>
        <td id="quantity"></td>
        <td id="total"></td>
    </tr>
</table>

Answer 1

您可以向innerHTML添加新行：

 const items = [ { item: "Americano", quantity: 1, total: "12.52 sar" }, { item: "Frape", quantity: 3, total: "13.40 sar" }, { item: "Espresso", quantity: 2, total: "10.12 sar" } ]; for (var i = 0; i < items.length; i++) { document.getElementsByTagName("table")[0].innerHTML+= "<tr><td>"+items[i].item+"</td><td>"+items[i].quantity+"</td><td>"+items[i].total+"</td></tr>" };

 <table id="table"> <tr> <th>Item</th> <th>Quantity</th> <th>Total</th> </tr> </table>

您还可以使用一些框架，例如Alpine.js 。
此功能将对您有所帮助： https://alpinejs.dev/directives/for

Answer 2

有几种方法可以做到这一点。 老式的方法是使用 innerHTML，但现在最好创建一个文本节点。

例子：

 for (let i = 0; i < items.length; i++) {
        let item = document.getElementById("item");
        var itemText = document.createTextNode("foo!");
        item.appendChild(itemText);
    }

Answer 3

您可以使用 innerHTML 并且需要引用 items 数组

for (let i = 0; i < items.length; i++) {
    document.getElementById("item").innerHTML+= items[i].item +"</br>";
    document.getElementById("quantity").innerHTML += items[i].quantity+"</br>";
    document.getElementById("total").innerHTML += items[i].total+"</br>";
}