JS+CSS+HTML写出购物车表格 加减总价小计
时间: 2023-06-28 09:12:25 浏览: 106
好的,以下是一个简单的购物车表格的示例代码,包括加减按钮和总价小计功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
.total {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>10.00</td>
<td>
<button class="reduce">-</button>
<span class="amount">1</span>
<button class="add">+</button>
</td>
<td class="subtotal">10.00</td>
</tr>
<tr>
<td>商品2</td>
<td>20.00</td>
<td>
<button class="reduce">-</button>
<span class="amount">1</span>
<button class="add">+</button>
</td>
<td class="subtotal">20.00</td>
</tr>
<tr>
<th colspan="3" class="total">总价</th>
<td id="totalPrice">30.00</td>
</tr>
</tbody>
</table>
<script>
// 获取元素
const reduceBtns = document.querySelectorAll('.reduce');
const addBtns = document.querySelectorAll('.add');
const amountEles = document.querySelectorAll('.amount');
const subtotalEles = document.querySelectorAll('.subtotal');
const totalPriceEle = document.querySelector('#totalPrice');
// 定义变量
let totalPrice = 0;
// 绑定事件
for (let i = 0; i < reduceBtns.length; i++) {
reduceBtns[i].addEventListener('click', function() {
let amount = parseInt(amountEles[i].textContent);
if (amount > 1) {
amount--;
amountEles[i].textContent = amount;
let price = parseFloat(subtotalEles[i].textContent) / (amount + 1);
subtotalEles[i].textContent = (price * amount).toFixed(2);
totalPrice = parseFloat(totalPrice) - price;
totalPriceEle.textContent = totalPrice.toFixed(2);
}
});
}
for (let i = 0; i < addBtns.length; i++) {
addBtns[i].addEventListener('click', function() {
let amount = parseInt(amountEles[i].textContent);
amount++;
amountEles[i].textContent = amount;
let price = parseFloat(subtotalEles[i].textContent) / (amount - 1);
subtotalEles[i].textContent = (price * amount).toFixed(2);
totalPrice = parseFloat(totalPrice) + price;
totalPriceEle.textContent = totalPrice.toFixed(2);
});
}
// 计算初始总价
for (let i = 0; i < subtotalEles.length; i++) {
totalPrice += parseFloat(subtotalEles[i].textContent);
}
totalPriceEle.textContent = totalPrice.toFixed(2);
</script>
</body>
</html>
```
代码解释:
1. HTML部分:使用`<table>`标签创建表格,包括表头和表体两部分。每个商品行都有一个数量`<td>`单元格,里面包含一个减少按钮、一个显示数量的`<span>`元素和一个增加按钮。总价小计使用`<td>`标记,总价使用`<td>`标记和一个`id`属性。
2. CSS部分:设置表格样式,包括边框、对齐和背景色。
3. JavaScript部分:获取所有需要操作的元素,并定义一个变量`totalPrice`用于统计总价。为减少按钮和增加按钮绑定`click`事件,用于修改数量和小计,并更新总价。在页面加载时计算初始总价。
以上代码仅供参考,实际应用中可能需要根据实际情况进行调整和优化。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)