zuoy购物车
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>23购物车删除单行</title> <style> * { margin: 0; padding: 0; list-style-type: none; } a { color: #666; text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; border: 0; } body { color: #666; font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; } clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; } *html .clearfix { height: 1%; } .clearfix { display: block; } *+html .clearfix { min-height: 1%; } .fl { float: left; } .fr { float: right; } /*素材家园 - www.sucaijiayuan.com*/ .catbox { width: 940px; margin: 100px auto; } .catbox table { text-align: center; width: 100%; } .catbox table th, .catbox table td { border: 1px solid #cadeff; } .catbox table th { background: #e2f2ff; border-top: 3px solid #a7cbff; height: 30px; } .catbox table td { padding: 10px; color: #444; } .catbox table tbody tr:hover { background: RGB(238, 246, 255); } .checkbox { width: 60px; } .check-all { vertical-align: middle; } .goods { width: 300px; } .goods span { width: 180px; margin-top: 20px; text-align: left; float: left; } .goods img { width: 100px; height: 80px; margin-right: 10px; float: left; } .price { width: 130px; } .count { width: 90px; } .count .add, .count input, .count .reduce { float: left; margin-right: -1px; position: relative; z-index: 0; } .count .add, .count .reduce { height: 23px; width: 17px; border: 1px solid #e5e5e5; background: #f0f0f0; text-align: center; line-height: 23px; color: #444; } .count .add:hover, .count .reduce:hover { color: #f50; z-index: 3; border-color: #f60; cursor: pointer; } .count input { width: 50px; height: 15px; line-height: 15px; border: 1px solid #aaa; color: #343434; text-align: center; padding: 4px 0; background-color: #fff; z-index: 2; } .subtotal { width: 150px; color: red; font-weight: bold; } .operation span:hover, a:hover { cursor: pointer; color: red; text-decoration: underline; } .foot { margin-top: 0px; color: #666; height: 48px; border: 1px solid #c8c8c8; border-top: 0; background-color: #eaeaea; background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226)); position: relative; z-index: 8; } .foot div, .foot a { line-height: 48px; height: 48px; } .foot .select-all { width: 80px; height: 48px; line-height: 48px; color: #666; text-align: center; } .foot .delete { padding-left: 10px; } .foot .closing { border-left: 1px solid #c8c8c8; width: 103px; text-align: center; color: #666; font-weight: bold; cursor: pointer; background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226)); } .foot .closing:hover { background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241)); color: #333; } .foot .total { margin: 0 20px; cursor: pointer; } .foot #priceTotal, .foot #selectedTotal { color: red; font-family: "Microsoft Yahei"; font-weight: bold; } .foot .selected { cursor: pointer; } .foot .selected .arrow { position: relative; top: -3px; margin-left: 3px; } .foot .selected .down { position: relative; top: 3px; display: none; } .show .selected .down { display: inline; } .show .selected .up { display: none; } .foot .selected:hover .arrow { color: red; } .foot .selected-view { width: 938px; border: 1px solid #c8c8c8; position: absolute; height: auto; background: #ffffff; z-index: 9; bottom: 48px; left: -1px; display: none; } .show .selected-view { display: block; } .foot .selected-view div { height: auto; } .foot .selected-view .arrow { font-size: 16px; line-height: 100%; color: #c8c8c8; position: absolute; right: 330px; bottom: -9px; } .foot .selected-view .arrow span { color: #ffffff; position: absolute; left: 0px; bottom: 1px; } #selectedViewList { padding: 10px 20px 10px 20px; } #selectedViewList div { /* display: inline-block; */ position: relative; width: 100px; height: 80px; border: 1px solid #ccc; margin: 10px; float: left; } #selectedViewList div img { width: 100px; height: 80px; margin-right: 10px; float: left; } #selectedViewList div span { display: none; color: #ffffff; font-size: 12px; position: absolute; top: 0px; right: 0px; width: 60px; height: 18px; line-height: 18px; text-align: center; background: #000; cursor: pointer; } #selectedViewList div:hover span { display: block; } </style> </head> <body> <div class="catbox"> <table id="cartTable"> <thead> <tr> <th><label> <input class="check-all check" type="checkbox" /> 全选</label></th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td class="checkbox"> <input class="check-one check" type="checkbox" /> </td> <td class="goods"> <img src="../source/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span> </td> <td class="price">5999.88</td> <td class="count"> <span class="reduce"></span> <input class="count-input" type="text" value="1" /> <span class="add">+</span> </td> <td class="subtotal">5999.88</td> <td class="operation"> <span class="delete">删除</span> </td> </tr> <tr> <td class="checkbox"> <input class="check-one check" type="checkbox" /> </td> <td class="goods"> <img src="../source/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span> </td> <td class="price">3888.50</td> <td class="count"> <span class="reduce"></span> <input class="count-input" type="text" value="1" /> <span class="add">+</span> </td> <td class="subtotal">3888.50</td> <td class="operation"> <span class="delete">删除</span> </td> </tr> <tr> <td class="checkbox"> <input class="check-one check" type="checkbox" /> </td> <td class="goods"> <img src="../source/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span> </td> <td class="price">1428.50</td> <td class="count"> <span class="reduce"></span> <input class="count-input" type="text" value="1" /> <span class="add">+</span> </td> <td class="subtotal">1428.50</td> <td class="operation"> <span class="delete">删除</span> </td> </tr> <tr> <td class="checkbox"> <input class="check-one check" type="checkbox" /> </td> <td class="goods"> <img src="../source/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span> </td> <td class="price">640.60</td> <td class="count"> <span class="reduce"></span> <input class="count-input" type="text" value="1" /> <span class="add">+</span> </td> <td class="subtotal">640.60</td> <td class="operation"> <span class="delete">删除</span> </td> </tr> </tbody> </table> <div class="foot" id="foot"> <a class="fl delete" id="deleteAll">删除</a> <div class="fr closing">结 算</div> <input type="hidden" id="cartTotalPrice" /> <div class="fr total">合计:¥<span id="priceTotal">0.00</span></div> <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件</div> </div> </div> <script> var oCheckOnes = document.querySelectorAll('.check-one'); var oCHeckall = document.querySelector('.check-all') var oin = document.querySelectorAll('.count-input') console.log(oCHeckall) console.log(oCheckOnes) $('.catbox').addEventListener('click', function (a) { var e = a || event; var target = e.target || e.srcElement; // 删除 if (target.className == 'delete') { target.parentNode.parentNode.remove() oCheckOnes = document.querySelectorAll('.check-one') for (var i = 0; i < oCheckOnes.length; i++) { if (!oCheckOnes[i].checked) { break } } oCHeckall.checked = i === oCheckOnes.length ? true : false } // 全选 if (target.className == 'check-all check') { for (var i = 0; i < oCheckOnes.length; i++) { oCheckOnes[i].checked = target.checked } } // 反选 if (target.className == 'check-one check') { for (var i = 0; i < oCheckOnes.length; i++) { if (!oCheckOnes[i].checked) { break } } oCHeckall.checked = i === oCheckOnes.length ? true : false } // 加号 if (target.className == 'add') { target.previousElementSibling.value++ var price = target.parentNode.previousElementSibling.innerHTML console.log(price) target.parentNode.nextElementSibling.innerHTML = target.previousElementSibling.value * price target.previousElementSibling.previousElementSibling.innerHTML = '-' } //减法 if (target.className == 'reduce') { if (target.innerHTML) { target.nextElementSibling.value-- var price = target.parentNode.previousElementSibling.innerHTML target.parentNode.nextElementSibling.innerHTML = target.nextElementSibling.value * price if (target.nextElementSibling.value == 1) { target.innerHTML = '' } } } //选中批量删除 if (target.className == 'fl delete') { oCheckOnes.forEach(function (val) { if (val.checked) { val.parentNode.parentNode.remove() } }) oCheckOnes = document.querySelectorAll('.check-one') } // if (target.className == 'count-input') { // console.log(!isNaN(target.value)) // } count() countprice() }) //数量合计 function count() { var sum = 0 oCheckOnes.forEach(function (val) { if (val.checked) { sum += val.parentNode.parentNode.querySelector('.count-input').value * 1 } }) $('#selectedTotal').innerHTML = sum } oin.forEach(function (val) { console.log(val) if (!isNaN(val.value) && val.value > 1) { console.log(444) val.onblur = function () { var price = val.parentNode.previousElementSibling.innerHTML * 1 console.log(price) val.parentNode.nextElementSibling.innerHTML = val.value * price } } }) function countprice() { var sum = 0 oCheckOnes.forEach(function (val) { if (val.checked) { sum += val.parentNode.parentNode.querySelector('.subtotal').innerHTML * 1 } //innerHTML是识别除表单之外的标签 }) sum = sum.toFixed(2) $('#priceTotal').innerHTML = sum } function $(e) { return document.querySelector(e) } </script> </body> </html>