很高兴为您提供
购物车功能的HTML
代码实现，以下是完整的HTML
代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
购物车</title>
</head>
<body>
<h1>
购物车</h1>
<table>
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check-item"></td>
<td>商品1</td>
<td>10</td>
<td><button class="reduce-btn">-</button><span class="count">1</span><button class="add-btn">+</button></td>
<td class="subtotal">10</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check-item"></td>
<td>商品2</td>
<td>20</td>
<td><button class="reduce-btn">-</button><span class="count">1</span><button class="add-btn">+</button></td>
<td class="subtotal">20</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check-item"></td>
<td>商品3</td>
<td>30</td>
<td><button class="reduce-btn">-</button><span class="count">1</span><button class="add-btn">+</button></td>
<td class="subtotal">30</td>
<td><button class="delete-btn">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<button id="delete-all-btn">删除选中商品</button>
<span>
总计：<span id="total-count">0</span>件商品，
总额：<span id="total-price">0</span>元</span>
</td>
</tr>
</tfoot>
</table>
<script>
var checkAll = document.getElementById('check-all')
var checkItems = document.getElementsByClassName('check-item')
var reduceBtns = document.getElementsByClassName('reduce-btn')
var addBtns = document.getElementsByClassName('add-btn')
var deleteBtns = document.getElementsByClassName('delete-btn')
var deleteAllBtn = document.getElementById('delete-all-btn')
var totalCount = document.getElementById('total-count')
var totalPrice = document.getElementById('total-price')
// 全选
checkAll.onclick = function() {
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].checked = this.checked
}
getTotal()
}
// 单选
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].onclick = function() {
var flag = true
for (var j = 0; j < checkItems.length; j++) {
if (!checkItems[j].checked) {
flag = false
break
}
}
checkAll.checked = flag
getTotal()
}
}
// 增加数量
for (var i = 0; i < addBtns.length; i++) {
addBtns[i].onclick = function() {
var countInput = this.parentNode.querySelector('.count')
var count = parseInt(countInput.innerText)
count++
countInput.innerText = count
getSubtotal(this.parentNode.parentNode)
getTotal()
}
}
// 减少数量
for (var i = 0; i < reduceBtns.length; i++) {
reduceBtns[i].onclick = function() {
var countInput = this.parentNode.querySelector('.count')
var count = parseInt(countInput.innerText)
if (count > 1) {
count--
countInput.innerText = count
getSubtotal(this.parentNode.parentNode)
}
getTotal()
}
}
//
计算小计
function getSubtotal(tr) {
var price = tr.querySelector('td:nth-child(3)').innerText
var count = tr.querySelector('.count').innerText
var subtotal = parseInt(price) * parseInt(count)
tr.querySelector('.subtotal').innerText = subtotal
}
// 删除商品
for (var i = 0; i < deleteBtns.length; i++) {
deleteBtns[i].onclick = function() {
var tr = this.parentNode.parentNode
tr.parentNode.removeChild(tr)
getTotal()
}
}
// 删除选中商品
deleteAllBtn.onclick = function() {
for (var i = 0; i < checkItems.length; i++) {
if (checkItems[i].checked) {
var tr = checkItems[i].parentNode.parentNode
tr.parentNode.removeChild(tr)
i--
}
}
getTotal()
}
//
计算总计和
总额
function getTotal() {
var totalCountNum = 0
var totalPriceNum = 0
for (var i = 0; i < checkItems.length; i++) {
if (checkItems[i].checked) {
var tr = checkItems[i].parentNode.parentNode
var count = parseInt(tr.querySelector('.count').innerText)
var price = parseInt(tr.querySelector('.subtotal').innerText)
totalCountNum += count
totalPriceNum += price
}
}
totalCount.innerText = totalCountNum
totalPrice.innerText = totalPriceNum
}
</script>
</body>
</html>
```
该
购物车功能实现了以下功能：
1. 全选/取消全选；
2. 单选/取消单选；
3. 增加/减少商品数量；
4.
计算商品小计；
5. 删除单个商品；
6. 删除选中商品；
7.
计算总计和
总额。
您可以在浏览器中打开该HTML文件，进行
购物车功能的使用和测试。
6316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
