js---全选反选案例+购物车案例
全选反选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
table {
width: 500px;
border: 1px solid #ccc;
border-collapse: collapse;
margin: 100px auto;
}
th,
td {
width: 80px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" class="checkAll">全选</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check"></td>
<td>魅族20</td>
<td>魅族</td>
<td>2999</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>魅族20pro</td>
<td>魅族</td>
<td>4399</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>魅族20 infinity</td>
<td>魅族</td>
<td>7399</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>魅族18</td>
<td>魅族</td>
<td>2999</td>
</tr>
</tbody>
</table>
<script>
// 1. 点击全选复选框，下面的小复选框全都选中
const checkAll = document.querySelector('.checkAll')
const checks = document.querySelectorAll('.check')
checkAll.addEventListener('click', function () {
// console.log(this.checked);
checks.forEach(ele => ele.checked = this.checked)
})
// 2. 只要小复选框全部选中，全选复选框自动选中，有一个小复选框没有选中，全选复选框就不会选中
// 每次点击小复选框，利用every遍历所有小复选框，把返回值作为状态给全选按钮
// 注意要转换为真数组才能使用every方法
// for (let i = 0; i < checks.length; i++) {
// checks[i].addEventListener('click', function () {
// console.log(Array.from(checks).every(ele => ele.checked === true));
// checkAll.checked = Array.from(checks).every(ele => ele.checked === true)
// })
// }
checks.forEach(ele => {
ele.addEventListener('change', function () {
checkAll.checked = Array.from(checks).every(ele => ele.checked === true)
})
})
</script>
</body>
</html>
购物车案例
第一种方式：forEach遍历数组加到str中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
table {
width: 800px;
border: 1px solid #ccc;
border-collapse: collapse;
margin: 100px auto 0;
}
th,
td {
width: 120px;
height: 60px;
text-align: center;
border: 1px solid #ccc;
}
li {
list-style: none;
font-size: 12px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>产品</th>
<th>规格</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>小米手机</td>
<td>白色</td>
<td>2899</td>
<td>x23</td>
<td>66677</td>
</tr> -->
</tbody>
<tr class="total">
<td colspan="5"></td>
</tr>
</table>
<script>
const goodsList = [
{
name: '小米空调',
spec: {
color: '白色',
size: '80cm * 30cm'
},
price: 3499,
count: 10,
},
{
name: '魅族20',
spec: {
color: '白色',
storage: '12+512'
},
price: 2999,
count: 10,
gift: '手机壳,耳机'
},
{
name: '魅族20pro',
spec: {
color: '粉色',
storage: '12+512'
},
price: 3499,
count: 10,
gift: '手机壳,耳机'
},
{
name: '魅族20 infinity',
spec: {
color: '白色',
storage: '12+512'
},
price: 7399,
count: 10,
gift: '手机壳,20周年限定纪念品'
}
]
let str = ''
const tbody = document.querySelector('tbody')
goodsList.forEach(ele => {
const { name, spec, price, count, gift } = ele
const { color, size, storage } = spec
// console.log(color, size, storage);
// 处理规格文字
let text = Object.values(spec).join(' / ')
// 处理赠品
// 把字符串转化成数组 split(',')
let giftStr = ''
gift ? gift.split(',').forEach(ele => {
giftStr += `【赠品】 ${ele}`
}) : '';
str += `
${name}
${giftStr}
${text}
${price}
x${count}
${price * count}
`
tbody.innerHTML = str
})
// 计算总计
// 1.求和 用到reduce 累计器 总价total
// 2.根据数据里面的数量和单价累加和，总价也要保留2位小数
// 3.reduce有2个参数 1.回调函数 2.初始值 0
const total = goodsList.reduce((prev, current) => prev + current.price * current.count, 0)
const sum = document.querySelector('.total td')
sum.innerHTML = `合计：${total.toFixed(2)}`
</script>
</body>
</html>
第二种方式：map+join组合转换成字符串
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
table {
width: 600px;
margin: 100px auto;
border-collapse: collapse;
border: 1px solid #f00;
}
th,
td {
border: 1px solid #f00;
height: 40px;
line-height: 40px;
text-align: center;
}
span {
color: red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>产品 </th>
<th>规格 </th>
<th>价格 </th>
<th>数量 </th>
<th>总价 </th>
</tr>
</thead>
<tbody>
</tbody>
<tr align="right">
<td colspan="5">合计:<span class="amount">1526</span></td>
</tr>
</table>
<script>
// 1.根据后台提供的数据 渲染购物车页面
const goodsList = [
{
id: "4001172",
name: "小米手机",
price: 2899,
spec: { color: '白色' },
count: 23,
gift: "手机壳,手机膜"
},
{
id: "4001173",
name: "小米1",
price: 2199,
spec: { color: '白色' },
count: 23,
gift: "手机壳,手机膜"
},
{
id: "4001174",
name: "小米摄像头",
price: 3700,
spec: { color: '黑色' },
count: 23
},
{
id: "4001175",
name: "小米空调",
price: 3100,
spec: { color: '白色', size: "40cm*40cm" },
count: 23,
gift: "壳,防尘布"
}
]
// 1.渲染+join来遍历 ，有多少条数据，渲染多少商品
// 对象解构 单价要保留2位小数 2899.00 toFixed(2)
document.querySelector('tbody').innerHTML = goodsList.map(ele => {
// 对象解构
const { name, price, count, spec, gift } = ele
console.log(gift)
// 处理规格文字
const text = Object.values(spec).join('/')
// 处理赠品
// 把字符串转换为数组split(',') map+join生成对应标签
// 判断是否有gift属性 没有的话 不需要map+join生成标签
// console.log(gift.split(','))
const str = gift ? gift.split(',').map(ele => `【赠品】${ele}`).join('') : ""
// console.log(str)
return `
${name}
${str}
${text}
${price.toFixed(2)}
x${count}
${(count * price).toFixed(2)}
`;
}).join('')
// 总价业务
// 1.求和 用到reduce 累计器 总价total
// 2.根据数据里面的数量和单价累加和，总价也要保留2位小数
// 3.reduce有2个参数 1.回调函数 2.初始值 0
const total = goodsList.reduce((prev, current) => prev + current.price * current.count, 0)
console.log(total.toFixed(2))
document.querySelector('.amount').innerHTML = total.toFixed(2)
</script>
</body>
</html>