<!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;
? ? ? ? }
? ? ? ? td input{
? ? ? ? ? ? width: 40px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <table>
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th><input id="ckAll" type="checkbox">全選</th>
? ? ? ? ? ? ? ? <th>商品名稱</th>
? ? ? ? ? ? ? ? <th>商品圖片</th>
? ? ? ? ? ? ? ? <th>商品價格</th>
? ? ? ? ? ? ? ? <th>購買數(shù)量</th>
? ? ? ? ? ? ? ? <th>小計(jì)</th>
? ? ? ? ? ? ? ? <th>操作</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? </tbody>
? ? ? ? <tfoot>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td colspan="7" style="text-align: right;">
? ? ? ? ? ? ? ? ? ? <span>總計(jì)：</span>
? ? ? ? ? ? ? ? ? ? <span id="total"></span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? </tfoot>
? ? </table>
? ? <script>
? ? ? ? //定義一個商品數(shù)組
? ? ? ? let goodses = [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'iphone手機(jī)',
? ? ? ? ? ? ? ? img:'https://img13.360buyimg.com/n7/jfs/t1/137629/3/23805/201521/61aa1b26Eda614739/0a66ec0ce614c97c.jpg',
? ? ? ? ? ? ? ? price:5999,
? ? ? ? ? ? ? ? count:5,
? ? ? ? ? ? ? ? isck:false
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'華為手機(jī)',
? ? ? ? ? ? ? ? img:'https://img10.360buyimg.com/n7/jfs/t1/179598/36/6697/144323/60b47feaEf44a5eed/b88c0485ca234e0d.jpg',
? ? ? ? ? ? ? ? price:6289,
? ? ? ? ? ? ? ? count:2,
? ? ? ? ? ? ? ? isck:true
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'小米手機(jī)',
? ? ? ? ? ? ? ? img:'https://img10.360buyimg.com/n7/jfs/t1/160230/34/12049/58798/60484a63Edd19d4bb/401ca05f7e2f047f.jpg',
? ? ? ? ? ? ? ? price:2899,
? ? ? ? ? ? ? ? count:7,
? ? ? ? ? ? ? ? isck:false
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'三星手機(jī)',
? ? ? ? ? ? ? ? img:'https://img10.360buyimg.com/n7/jfs/t1/199895/25/19291/124250/61a9cd69E951b2336/bf9855e517120b39.jpg',
? ? ? ? ? ? ? ? price:9399,
? ? ? ? ? ? ? ? count:3,
? ? ? ? ? ? ? ? isck:false
? ? ? ? ? ? }
? ? ? ? ]
? ? ? ? //加載商品信息
? ? ? ? function loadGoodses(){
? ? ? ? ? ? //循環(huán)商品數(shù)組
? ? ? ? ? ? goodses.forEach(g=>{
? ? ? ? ? ? ? ? // 每個商品信息，創(chuàng)建一個對應(yīng)的tr
? ? ? ? ? ? ? ? let tr = document.createElement('tr')
? ? ? ? ? ? ? ? // 每個tr里面有7個td
? ? ? ? ? ? ? ? let td1 = document.createElement('td')
? ? ? ? ? ? ? ? // 每一個商品對應(yīng)的那個復(fù)選框
? ? ? ? ? ? ? ? let ck = document.createElement('input')
? ? ? ? ? ? ? ? ck.type = 'checkbox'
? ? ? ? ? ? ? ? ck.className = 'ck' ? //注意：這里只是加一個標(biāo)記
? ? ? ? ? ? ? ? // 設(shè)置復(fù)選框的選中狀態(tài)
? ? ? ? ? ? ? ? ck.checked = g.isck
? ? ? ? ? ? ? ? // 注冊復(fù)選框狀態(tài)發(fā)生改變后事件
? ? ? ? ? ? ? ? ck.onchange = function(){
? ? ? ? ? ? ? ? ? ? //更新商品的狀態(tài)
? ? ? ? ? ? ? ? ? ? g.isck = ck.checked
? ? ? ? ? ? ? ? ? ? //再次調(diào)用計(jì)算總計(jì)的方法
? ? ? ? ? ? ? ? ? ? totalPrice()
? ? ? ? ? ? ? ? ? ? // 判斷是否需要更新全選復(fù)選框的狀態(tài)
? ? ? ? ? ? ? ? ? ? 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 = '-'
? ? ? ? ? ? ? ? // 給減按鈕注冊點(diǎn)擊事件
? ? ? ? ? ? ? ? btn1.onclick = function(){
? ? ? ? ? ? ? ? ? ? g.count-- ?//商品數(shù)量減1
? ? ? ? ? ? ? ? ? ? // 購買數(shù)量不能小于1
? ? ? ? ? ? ? ? ? ? if(g.count<1) g.count=1
? ? ? ? ? ? ? ? ? ? // 更新商品數(shù)量
? ? ? ? ? ? ? ? ? ? count.value = g.count
? ? ? ? ? ? ? ? ? ? // 更新商品小計(jì)
? ? ? ? ? ? ? ? ? ? td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
? ? ? ? ? ? ? ? ? ? //再次調(diào)用計(jì)算總計(jì)的方法
? ? ? ? ? ? ? ? ? ? totalPrice()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? td5.appendChild(btn1)
? ? ? ? ? ? ? ? // 文本框
? ? ? ? ? ? ? ? let count = document.createElement('input')
? ? ? ? ? ? ? ? count.value = g.count ?//設(shè)置文本框的值
? ? ? ? ? ? ? ? td5.appendChild(count)
? ? ? ? ? ? ? ? let btn2 = document.createElement('button')
? ? ? ? ? ? ? ? btn2.innerHTML = '+'
? ? ? ? ? ? ? ? // 給加按鈕注冊點(diǎn)擊事件
? ? ? ? ? ? ? ? btn2.onclick = function(){
? ? ? ? ? ? ? ? ? ? g.count ++ ?//商品數(shù)量加1
? ? ? ? ? ? ? ? ? ? //更新界面
? ? ? ? ? ? ? ? ? ? count.value = g.count
? ? ? ? ? ? ? ? ? ? td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
? ? ? ? ? ? ? ? ? ? //再次調(diào)用計(jì)算總計(jì)的方法
? ? ? ? ? ? ? ? ? ? totalPrice()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? td5.appendChild(btn2)
? ? ? ? ? ? ? ? // td6里面顯示的是單個商品的小計(jì)
? ? ? ? ? ? ? ? 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 = '刪除'
? ? ? ? ? ? ? ? // 給刪除按鈕注冊點(diǎn)擊事件
? ? ? ? ? ? ? ? del.onclick = function(){
? ? ? ? ? ? ? ? ? ? //刪除tr標(biāo)簽
? ? ? ? ? ? ? ? ? ? tr.remove()
? ? ? ? ? ? ? ? ? ? // 獲取當(dāng)前商品在數(shù)組中的索引
? ? ? ? ? ? ? ? ? ? let index = goodses.findIndex(r=>r.name===g.name)
? ? ? ? ? ? ? ? ? ? //刪除數(shù)組中的原始數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? goodses.splice(index,1)
? ? ? ? ? ? ? ? ? ? //再次調(diào)用計(jì)算總計(jì)的方法
? ? ? ? ? ? ? ? ? ? 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)
? ? ? ? ? ? })
? ? ? ? } ?
? ? ? ? //調(diào)用加載商品信息的方法
? ? ? ? loadGoodses()
? ? ? ? //計(jì)算總計(jì)的方法
? ? ? ? function totalPrice(){
? ? ? ? ? ? //計(jì)算出總計(jì)
? ? ? ? ? ? let money = goodses.filter(r=>r.isck).reduce((a,b)=>a+b.count*b.price,0)
? ? ? ? ? ? //顯示總計(jì)
? ? ? ? ? ? document.querySelector('#total').innerHTML = '￥'+money.toFixed(2)
? ? ? ? }
? ? ? ? //調(diào)用計(jì)算總計(jì)的方法
? ? ? ? totalPrice()
? ? ? ? //給全選復(fù)選框注冊狀態(tài)改變后事件
? ? ? ? document.querySelector('#ckAll').onchange = function(){
? ? ? ? ? ? let cks = document.querySelectorAll('.ck')
? ? ? ? ? ? //更新DOM
? ? ? ? ? ? cks.forEach(ck=>{
? ? ? ? ? ? ? ? ck.checked = this.checked
? ? ? ? ? ? })
? ? ? ? ? ? //更新數(shù)據(jù)
? ? ? ? ? ? goodses.forEach(g=>{
? ? ? ? ? ? ? ? g.isck = this.checked
? ? ? ? ? ? })
? ? ? ? ? ? //再次調(diào)用計(jì)算總計(jì)的方法
? ? ? ? ? ? totalPrice()
? ? ? ? }
? ? </script>
</body>
</html>
