我有一个在按下按钮时调用的函数,并将其添加到数组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表似乎很笨拙。谢谢
答案 0 :(得分:2)
您可以使用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(''));