*{
margin: 0;
padding: 0;
list-style: none;
outline: none;
}
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;
}
tfoot tr td{
text-align: right;
}
tfoot tr td span{
color: red;
}
全选
|
商品名称 | 图片 | 单价 | 购买数量 | 小计 | 操作 |
---|---|---|---|---|---|---|
总计:¥ 0.00
|
// 封装三个常用方法,简化代码
function $c(tagName) {
return document.createElement(tagName)
}
function $s(tagName) {
return document.querySelector(tagName)
}
function $sall(tagName) {
return document.querySelectorAll(tagName)
}
// 商品类
class Goods{
constructor(name, img, price, count, isck=false){
// 商品名称
this.name = name
// 图片
this.img = img
// 单价
this.price = price
// 购买数量
this.count = count
// 是否选中
this.isck = isck
}
}
// 商品数组
let goodses = [
new Goods('耐克球鞋', 'https://img14.360buyimg.com/n7/jfs/t1/139075/29/21692/356109/61a68a2cEd4712d8d/5b25f053b654a20b.png', 355, 3),
new Goods('阿迪球衣', 'https://img13.360buyimg.com/n7/jfs/t1/158689/25/22100/157235/61a98f1dEff59374e/b8ef8f0dce8f6e73.jpg', 255, 2),
new Goods('彪马裤子', 'https://img14.360buyimg.com/n7/jfs/t1/162140/38/26170/111069/61a84497Efee6e398/be1e9e2a452aa718.jpg', 188, 5),
new Goods('特步帽子', 'https://img14.360buyimg.com/n7/jfs/t1/212683/31/6073/219482/61a39749E88b89751/5010212b673cd014.jpg', 57, 4),
]
// 加载商品信息
function loadGoodses() {
// 遍历商品数组元素
goodses.forEach(g => {
let tr = $c('tr')
// 复选框列
let td1 = $c('td')
let ck = $c('input')
ck.type = 'checkbox'
ck.className = 'ck'
ck.checked = g.isck
// 注册复选框状态发生改变后事件
ck.onchange = function() {
g.isck = ck.checked
totalPrice()
$s('#ckAll').checked = goodses.every(r => r.isck)
}
td1.appendChild(ck)
// 商品名列
let td2 = $c('td')
td2.innerHTML = g.name
// 图片列
let td3 = $c('td')
let img = $c('img')
img.src = g.img
td3.appendChild(img)
// 单价列
let td4 = $c('td')
td4.innerHTML = '¥' + g.price.toFixed(2)
// toFixed(number n)方法,保留数字后n位
// 购买数量列
let td5 = $c('td')
// 减按钮
let btn1 = $c('button')
btn1.innerHTML = '-'
btn1.onclick = function() {
g.count--
// 数量至少为1
if(g.count < 1) g.count = 1
// 更新商品数量
icount.value = g.count
// 更新小计
td6.innerHTML = '¥' + (g.price * g.count).toFixed(2)
// 更新总价
totalPrice()
}
// 数字文本框
let icount = $c('input')
icount.value = g.count
// 加按钮
let btn2 = $c('button')
btn2.innerHTML = '+'
btn2.onclick = function() {
g.count++
icount.value = g.count
// 更新小计
td6.innerHTML = '¥' + (g.price * g.count).toFixed(2)
// 更新总价
totalPrice()
}
td5.appendChild(btn1)
td5.appendChild(icount)
td5.appendChild(btn2)
// 小计列
let td6 = $c('td')
td6.innerHTML = '¥' + (g.price * g.count).toFixed(2)
// 操作列(删除。。。)
let td7 = $c('td')
let del = $c('button')
del.innerHTML = '删除'
del.onclick = function() {
if(confirm('确定删除吗?')){
// 删除整行
tr.remove()
// 获取当前商品对象索引
let index = goodses.findIndex(r => r.name === g.name)
// 删除该对象
goodses.splice(index, 1)
// 更新总价
totalPrice()
}
}
td7.appendChild(del)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
tr.appendChild(td6)
tr.appendChild(td7)
$s('tbody').appendChild(tr)
})
}
// 加载商品信息
loadGoodses()
// 计算(更新)总价方法
function totalPrice() {
$s('#total').innerHTML = goodses.filter(r => r.isck).reduce((pre, goods) => pre + goods.price * goods.count, 0).toFixed(2)
}
// 给全选复选框注册状态改变后事件
$s('#ckAll').onchange = function() {
$sall('.ck').forEach(ck => {
ck.checked = this.checked
})
goodses.forEach(g => {
g.isck = this.checked
})
// 更新总价
totalPrice()
}