<!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>購(gòu)物車</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>商品價(jià)格</th>
? ? ? ? ? ? ? ? <th>購(gòu)買數(shù)量</th>
? ? ? ? ? ? ? ? <th>小計(jì)</th>
? ? ? ? ? ? ? ? <th>操作</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? </tbody>
? ? ? ? <tfoot>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td colspan="7">
? ? ? ? ? ? ? ? ? ? <span>總計(jì)：</span>
? ? ? ? ? ? ? ? ? ? <span id="total"></span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? </tfoot>
? ? ? ? <script>
? ? ? ? ? ? let goodses = [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: 'iphone手機(jī)',
? ? ? ? ? ? ? ? ? ? img: 'https://img10.360buyimg.com/n7/jfs/t1/132022/23/12216/60913/5f86195bEacd08599/c5dc348d3f943324.jpg',
? ? ? ? ? ? ? ? ? ? price: 5999,
? ? ? ? ? ? ? ? ? ? count: 3,
? ? ? ? ? ? ? ? ? ? isck:false
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: '華為手機(jī)',
? ? ? ? ? ? ? ? ? ? img: 'https://img14.360buyimg.com/n7/jfs/t1/175302/26/12283/109959/60b5c73aE5346afc7/5d3d82e66d63e1ae.jpg',
? ? ? ? ? ? ? ? ? ? price: 7999,
? ? ? ? ? ? ? ? ? ? count: 2,
? ? ? ? ? ? ? ? ? ? isck:true
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: '小米手機(jī)',
? ? ? ? ? ? ? ? ? ? img: 'https://img11.360buyimg.com/n7/jfs/t1/147090/30/15709/47809/5fbe06d6E0eb8239d/a2e900f693d6e973.jpg',
? ? ? ? ? ? ? ? ? ? price: 4999,
? ? ? ? ? ? ? ? ? ? count: 4,
? ? ? ? ? ? ? ? ? ? isck:false
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: '三星手機(jī)',
? ? ? ? ? ? ? ? ? ? img: 'https://img14.360buyimg.com/n7/jfs/t1/137967/23/12904/71368/5f9f6bb7E1055f751/49c3a12c71172d4b.jpg',
? ? ? ? ? ? ? ? ? ? price: 8999,
? ? ? ? ? ? ? ? ? ? count: 1,
? ? ? ? ? ? ? ? ? ? isck:false
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? ? //加載商品信息
? ? ? ? ? ? function loadGoodses() {
? ? ? ? ? ? ? ? //循環(huán)商品數(shù)組
? ? ? ? ? ? ? ? goodses.forEach(g => {
? ? ? ? ? ? ? ? ? ? //每個(gè)商品信息，創(chuàng)建一個(gè)對(duì)應(yīng)的tr
? ? ? ? ? ? ? ? ? ? let tr = document.createElement('tr')
? ? ? ? ? ? ? ? ? ? // 每個(gè)tr里面有7個(gè)td
? ? ? ? ? ? ? ? ? ? let td1 = document.createElement('td')
? ? ? ? ? ? ? ? ? ? // 每一個(gè)商品對(duì)應(yīng)的那個(gè)復(fù)選框
? ? ? ? ? ? ? ? ? ? let ck = document.createElement('input')
? ? ? ? ? ? ? ? ? ? ck.type = 'checkbox'
? ? ? ? ? ? ? ? ? ? ck.className = 'ck' ? //注意：這里只是加一個(gè)標(biāo)記
? ? ? ? ? ? ? ? ? ? // 設(shè)置復(fù)選框的選中狀態(tài)
? ? ? ? ? ? ? ? ? ? ck.checked = g.isck
? ? ? ? ? ? ? ? ? ? // 注冊(cè)復(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顯示單價(jià)
? ? ? ? ? ? ? ? ? ? let td4 = document.createElement('td')
? ? ? ? ? ? ? ? ? ? td4.innerHTML = '￥'+g.price.toFixed(2)
? ? ? ? ? ? ? ? ? ? let td5 = document.createElement('td')
? ? ? ? ? ? ? ? ? ? // 減按鈕
? ? ? ? ? ? ? ? ? ? let btn1 = document.createElement('button')
? ? ? ? ? ? ? ? ? ? btn1.innerHTML = '-'
? ? ? ? ? ? ? ? ? ? // 給減按鈕注冊(cè)點(diǎn)擊事件
? ? ? ? ? ? ? ? ? ? btn1.onclick = function(){
? ? ? ? ? ? ? ? ? ? ? ? g.count-- ? //商品數(shù)量減1
? ? ? ? ? ? ? ? ? ? ? ? // 購(gòu)買數(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 = '+'
? ? ? ? ? ? ? ? ? ? // 給加按鈕注冊(cè)點(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里面顯示的是單個(gè)商品的小計(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 = '刪除'
? ? ? ? ? ? ? ? ? ? // 給刪除按鈕注冊(cè)點(diǎn)擊事件
? ? ? ? ? ? ? ? ? ? td7.appendChild(del)
? ? ? ? ? ? ? ? ? ? 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ù)選框注冊(cè)狀態(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>
? ? </table>
</body>
</html>
