[英]How can I output a dynamic JSON array into a HTML table?
我有一個函數,它在按下按鈕時被調用,並添加到數組order
:
var order = [];
function updateCart(item) {
var index = order.findIndex(i => i.id == item.id);
if (index != -1) {
order.splice(index, 1);
order.push(item);
} else {
order.push(item);
}
$("#test").html(JSON.stringify(order));
}
如果用戶添加一個項目的2個和另一個項目的1個,則order
可能如下所示:
[{"id":1,"name":"Hawaiian","price":10,"qty":2},
{"id":2,"name":"New Yorker","price":10,"qty":1}];
我希望能夠遍歷數組中的每個項目,並擁有一個可以以易於閱讀的方式顯示每個順序的HTML表。 例如:
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>order[0].name</td>
<td>order[0].qty</td>
</tr>
<tr>
<td>order[1].name</td>
<td>order[1].qty</td>
</tr>
</tbody>
</table>
如果我將數組傳遞給我的表,那么它似乎只是替換整個表,而沒有將值傳遞到我指定的位置。 看我下面的例子:
<script>
$("#test").html(JSON.stringify(order));
</script>
<table id="myTable">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<script>
for (var i = 0; i < order.length; i++) {
document.write("<tr>");
document.write("<td>");
document.write(order[i].name);
document.write("</td>");
document.write("</tr>");
}
</script>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
我想知道是否有更簡單的方法來做我想要的事情。 HTML DOM表似乎很笨拙。 謝謝
您可以使用map
。
HTML:
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
</thead>
<tbody id="test">
</tbody>
</table>
JS:
const order = [
{ id: 1, name: "Hawaiian", price: 10, qty: 2 },
{ id: 2, name: "New Yorker", price: 10, qty: 1 }
];
const singleRow = ({ name, qty }) => `<tr><td>${name}</td><td>${qty}</td></tr>`;
$("#test").html(order.map(singleRow).join(''));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.