<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>单价</th>
<th>操作</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- ------------------------------------------ -->
<script>
let data = [
{ id: 1, name: "云朵百香清", price: 17, count: 1 },
{ id: 2, name: "草莓丸奶", price: 25, count: 2 },
{ id: 3, name: "芒果丸茶", price: 22, count: 1 }
];
let tbody = document.querySelector("tbody");
function render() {
let str = "";
data.forEach((item) => {
str += `
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>
<input type="button" value="-" data-id=${item.id}>
<em>${item.count}</em>
<input type="button" value="+" data-id=${item.id}>
</td>
<td>${item.count}</td>
<td>${item.price * item.count}</td>
</tr>
`;
});
tbody.innerHTML = str;
}
render();
tbody.onclick = function (event) {
if (event.target.value == "-") {
if (data[event.target.dataset.id - 1].count > 0) {
data[event.target.dataset.id - 1].count--;
}
} else if (event.target.value == "+") {
data[event.target.dataset.id - 1].count++;
}
render();
}
</script>
</body>
</html>
Processed:
0.012, SQL:
9
