[英]Fill HTML table with for loop JS
我正在嘗試用 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>
您可以向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
有幾種方法可以做到這一點。 老式的方法是使用 innerHTML,但現在最好創建一個文本節點。
例子:
for (let i = 0; i < items.length; i++) {
let item = document.getElementById("item");
var itemText = document.createTextNode("foo!");
item.appendChild(itemText);
}
您可以使用 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>";
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.