首页 demo.html购物车全选商品 单价 数量 小计 操作Casio/卡西欧 EX-TR350 5999.88 + 5999.88 删除Canon/佳能 PowerShot SX50 HS 3888.50 + 3888.50 删除Sony/索尼 DSC- WX300 1428.50 + 1428.50 删除Fujifilm/富士 instax mini 25 640.60 + 640.60 删除全 选 删除 结 算 合计：￥0.00 已选商品0件取消选择样式页面 Style.csscharset “utf-8“; *margin:0;padding:0;list-style-type:none; acolor:#666;text-decoration:none; tableborder-collapse:collapse;border-spacing:0;border:0; bodycolor:#666;font:12px/180% Arial, Helvetica, sans-serif, “新宋体“; clearfix:aftercontent:“.“;display:block;height:0;clear:both;visibility:hidden .clearfixdisplay:inline-table *html .clearfixheight:1% .clearfixdisplay:block *+html .clearfixmin-height:1% .flfloat:left; .frfloat:right;.catboxwidth:940px;margin:0 auto; .catbox tabletext-align:center;width:100%; .catbox table th,.catbox table tdborder:1px solid #CADEFF; .catbox table thbackground:#e2f2ff;border-top:3px solid #a7cbff;height:30px; .catbox table tdpadding:10px;color:#444; .catbox table tbody tr:hoverbackground:RGB(238,246,255); .checkboxwidth:60px; .goodswidth:300px; .goods spanwidth:180px;margin-top:20px;text-align:left;float:left; .goods imgwidth:100px;height:80px;margin-right:10px;float:left; .pricewidth:130px; .countwidth:90px; .count .add, .count input, .count .reducefloat:left;margin-right:-1px;position:relative;z-index:0; .count .add, .count .reduceheight:23px;width:17px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444; .count .add:hover, .count .reduce:hovercolor:#f50;z-index:3;border-color:#f60;cursor:pointer; .count inputwidth:50px;height:15px;line-height:15px;border:1px solid #aaa;color:#343434;text- align:center;padding:4px 0;background-color:#fff;z-index:2;.subtotalwidth:150px;color:red;font-weight:bold; .operation span:hover,a:hovercursor:pointer;color:red;text-decoration:underline;.footmargin-top:10px;color:#666;height:48px;border:1px solid #c8c8c8;background- color:#eaeaea;background-image:linear- gradient(RGB(241,241,241),RGB(226,226,226);position:relative;z-index:8; .foot div, .foot aline-height:48px;height:48px; .foot .select-allwidth:100px;height:48px;line-height:48px;padding-left:5px;color:#666; .foot .closingborder-left:1px solid #c8c8c8;width:100px;text-align:center;color:#000;font- weight:bold;background:RGB(238,238,238);cursor:pointer; .foot .totalmargin:0 20px;cursor:pointer; .foot #priceTotal, .foot #selectedTotalcolor:red;font-family:“Microsoft Yahei“;font- weight:bold; .foot .selectedcursor:pointer; .foot .selected .arrowposition:relative;top:-3px;margin-left:3px; .foot .selected .downposition:relative;top:3px;display:none; .show .selected .downdisplay:inline; .show .selected .updisplay:none; .foot .selected:hover .arrowcolor:red; .foot .selected-viewwidth:935px;border:1px solid #c8c8c8;position:absolute;height:auto;background:#ffffff;z-index:9;bottom:48px;left:- 1px;display:none; .show .selected-viewdisplay:block; .foot .selected-view divheight:auto; .foot .selected-view .arrowfont-size:16px;line- height:100%;color:#c8c8c8;position:absolute;right:330px;bottom:-9px; .foot .selected-view .arrow spancolor:#ffffff;position:absolute;left:0px;bottom:1px;#selectedViewListpadding:10px 20px 10px 20px; #selectedViewList divdisplay:inline-block;position:relative;width:100px;height:80px;border:1px solid #ccc;margin:10px;float:left; #selectedViewList div imgwidth:100px;height:80px;margin-right:10px;float:left; #selectedViewList div spandisplay: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 spandisplay:block;Js 页面 demo.js/* Created by an.han on 13-12-17.*/ window.onload = function () if (!document.getElementsByClassName) document.getElementsByClassName = function (cls) var ret = ;var els = document.getElementsByTagName(*);for (var i = 0, len = els.length; i =0 | elsi.className.indexOf( + cls + ) =0 | elsi.className.indexOf( + cls) =0) ret.push(elsi);return ret;var table = document.getElementById(cartTable); / 购物车表格var selectInputs = document.getElementsByClassName(check); / 所有勾选框var checkAllInputs = document.getElementsByClassName(check-all) / 全选框var tr = table.children1.rows; /行var selectedTotal = document.getElementById(selectedTotal); /已选商品数目容器var priceTotal = document.getElementById(priceTotal); /总计var deleteAll = document.getElementById(deleteAll); / 删除全部按钮var selectedViewList = document.getElementById(selectedViewList); /浮层已选商品列表 容器var selected = document.getElementById(selected); /已选商品var foot = document.getElementById(foot);/ 更新总数和总价格，已选浮层function getTotal() var seleted = 0; var price = 0; var HTMLstr = ; for (var i = 0, len = tr.length; i 取消选择 else tri.className = ; selectedTotal.innerHTML = seleted; priceTotal.innerHTML = price.toFixed(2); selectedViewList.innerHT