购物车案例
<style>
table{
border-collapse: collapse;
}
td,th{
text-align: center;
border:1px solid #ccc;
padding: 2px 10px;
}
td img{
width: 100px;
}
td input{
width: 40px;
text-align: center;
outline: none;
}
</style>
<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" style="text-align: right;">
<span>总计：</span>
<span id="total"></span>
</td>
</tr>
</tfoot>
</table>
<script>
//定义一个商品数组
let goodses = [
{
name:'iphone手机',
img:'https://img13.360buyimg.com/n7/jfs/t1/137629/3/23805/201521/61aa1b26Eda614739/0a66ec0ce614c97c.jpg',
price:5999,
count:5,
isck:false
},
{
name:'华为手机',
img:'https://img10.360buyimg.com/n7/jfs/t1/179598/36/6697/144323/60b47feaEf44a5eed/b88c0485ca234e0d.jpg',
price:6289,
count:2,
isck:true
},
{
name:'小米手机',
img:'https://img10.360buyimg.com/n7/jfs/t1/160230/34/12049/58798/60484a63Edd19d4bb/401ca05f7e2f047f.jpg',
price:2899,
count:7,
isck:false
},
{
name:'三星手机',
img:'https://img10.360buyimg.com/n7/jfs/t1/199895/25/19291/124250/61a9cd69E951b2336/bf9855e517120b39.jpg',
price:9399,
count:3,
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 = '删除'
// 给删除按钮注册点击事件
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>
运行结果：
