<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
text-align: center;
border: 1px solid #ccc;
padding: 2px 10px;
}
td img {
width: 100px;
}
input {
width: 40px;
text-align: center;
outline: none;
}
tfoot td{
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><input id="ckAll" type="checkbox">全选</th>
<th>商品名称</th>
<th>商品图片</th>
<th>商品价格</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<span>总计：</span>
<span id="total"></span>
</td>
</tr>
</tfoot>
<script>
let goodses = [
{
name: 'iphone手机',
img: 'https://img10.360buyimg.com/n7/jfs/t1/132022/23/12216/60913/5f86195bEacd08599/c5dc348d3f943324.jpg',
price: 5999,
count: 3,
isck:false
},
{
name: '华为手机',
img: 'https://img14.360buyimg.com/n7/jfs/t1/175302/26/12283/109959/60b5c73aE5346afc7/5d3d82e66d63e1ae.jpg',
price: 7999,
count: 2,
isck:true
},
{
name: '小米手机',
img: 'https://img11.360buyimg.com/n7/jfs/t1/147090/30/15709/47809/5fbe06d6E0eb8239d/a2e900f693d6e973.jpg',
price: 4999,
count: 4,
isck:false
},
{
name: '三星手机',
img: 'https://img14.360buyimg.com/n7/jfs/t1/137967/23/12904/71368/5f9f6bb7E1055f751/49c3a12c71172d4b.jpg',
price: 8999,
count: 1,
isck:false
}
]
//加载商品信息
function loadGoodses() {
//循环商品数组
goodses.forEach(g => {
//每个商品信息，创建一个对应的tr
let tr = document.createElement('tr')
// 每个tr里面有7个td
let td1 = document.createElement('td')
// 每一个商品对应的那个复选框
let ck = document.createElement('input')
ck.type = 'checkbox'
ck.className = 'ck' //注意：这里只是加一个标记
// 设置复选框的选中状态
ck.checked = g.isck
// 注册复选框状态发生改变后事件
ck.onchange = function(){
//更新商品的状态
g.isck = ck.checked
//再次调用计算总计的方法
totalPrice()
// 判断是否需要更新全选复选框的状态
document.querySelector('#ckAll').checked = goodses.every(r=>r.isck)
}
td1.appendChild(ck)
let td2 = document.createElement('td')
td2.innerHTML = g.name
let td3 = document.createElement('td')
let img = document.createElement('img')
img.src = g.img
td3.appendChild(img)
// td4显示单价
let td4 = document.createElement('td')
td4.innerHTML = '￥'+g.price.toFixed(2)
let td5 = document.createElement('td')
// 减按钮
let btn1 = document.createElement('button')
btn1.innerHTML = '-'
// 给减按钮注册点击事件
btn1.onclick = function(){
g.count-- //商品数量减1
// 购买数量不能小于1
if(g.count<1) g.count=1
// 更新商品数量
count.value = g.count
// 更新商品小计
td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
//再次调用计算总计的方法
totalPrice()
}
td5.appendChild(btn1)
// 文本框
let count = document.createElement('input')
count.value = g.count //设置文本框的值
td5.appendChild(count)
let btn2 = document.createElement('button')
btn2.innerHTML = '+'
// 给加按钮注册点击事件
btn2.onclick = function(){
g.count++ //商品数量加1
//更新界面
count.value = g.count
td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
//再次调用计算总计的方法
totalPrice()
}
td5.appendChild(btn2)
// td6里面显示的是单个商品的小计
let td6 = document.createElement('td')
td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
let td7 = document.createElement('td')
let del = document.createElement('button')
del.innerHTML = '删除'
// 给删除按钮注册点击事件
td7.appendChild(del)
del.onclick = function(){
//删除tr标签
tr.remove()
// 获取当前商品在数组中的索引
let index = goodses.findIndex(r=>r.name===g.name)
//删除数组中的原始数据
goodses.splice(index,1)
//再次调用计算总计的方法
totalPrice()
}
td7.appendChild(del)
//将所有的td添加到tr中
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
tr.appendChild(td6)
tr.appendChild(td7)
//将tr添加到tbody中
document.querySelector('tbody').appendChild(tr)
})
}
//调用加载商品信息的方法
loadGoodses()
//计算总计的方法
function totalPrice(){
//计算出总计
let money = goodses.filter(r=>r.isck).reduce((a,b)=>a+b.count*b.price,0)
//显示总计
document.querySelector('#total').innerHTML = '￥'+money.toFixed(2)
}
//调用计算总计的方法
totalPrice()
//给全选复选框注册状态改变后事件
document.querySelector('#ckAll').onchange = function(){
let cks = document.querySelectorAll('.ck')
//更新DOM
cks.forEach(ck=>{
ck.checked = this.checked
})
//更新数据
goodses.forEach(g=>{
g.isck = this.checked
})
//再次调用计算总计的方法
totalPrice()
}
</script>
</table>
</body>
</html>
