js实现购物车(源码)

         全选
        删除
        
        
        

        
 

//***************************************************

* {
    margin: 0;
    padding: 0;
}
a {
    color: #666;
    text-decoration: none;
}
body {
    padding: 20px;
    color: #666;
}
.fl{
    float: left;
}
.fr {
    float: right;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    text-align: center;
    width: 937px;
}
th, td {
    border: 1px solid #CADEFF;
}
th {
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}
td {
    padding: 10px;
    color: #444;
}
tbody tr:hover {
    background: RGB(238,246,255);
}
.checkbox {
    width: 60px;
}
.goods {
    width: 300px;
}
.goods span {
    width: 180px;
    margin-top: 20px;
    text-align: left;
    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 {
    width: 80px;
}
.operation span:hover, a:hover {
    cursor: pointer;
    color: red;
    text-decoration: underline;
}
img {
    width: 100px;
    height: 80px;
    /*border: 1px solid #ccc;*/
    margin-right: 10px;
    float: left;
}

.foot {
    width: 935px;
    margin-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 a {
    line-height: 48px;
    height: 48px;
}
.foot .select-all {
    width: 100px;
    height: 48px;
    line-height: 48px;
    padding-left: 5px;
    color: #666;
}
.foot .closing {
    border-left: 1px solid #c8c8c8;
    width: 100px;
    text-align: center;
    color: #000;
    font-weight: bold;
    background: RGB(238,238,238);
    cursor: pointer;
}
.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: 935px;
    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: 20px;
    margin-bottom: -20px;
}
#selectedViewList div{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 80px;
    border: 1px solid #ccc;
    margin: 10px;
}
#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: RGBA(0,0,0,.5);
    cursor: pointer;
}
#selectedViewList div:hover span {
    display: block;
}
//js部分

/**
 * Created by double
 */


 window.onload &＃61; function (){
    if(!document.getElementsByClassName)
        document.getElementsByClassName &＃61; function(cls){
            var ret &＃61; [];
            var els &＃61; document.getElementsByTagName(&＃39;*&＃39;);
            for(var i &＃61; 0, len &＃61; els.length; i                 if(els[i].className &＃61;&＃61;&＃61; cls
                    ||els[i].className.indexOf(cls) >&＃61;0
                    ||els[i].className.indexOf(&＃39; &＃39; &＃43; cls) >&＃61;0
                    ||els[i].className.indexOf(&＃39; &＃39; &＃43; cls &＃43; &＃39; &＃39;) >&＃61;0){
                        ret.push(els[i]);
                }
            }
            return ret;
    }


    var table &＃61; document.getElementById(&＃39;cartTable&＃39;); // 购物车表格
    var selectInputs &＃61; document.getElementsByClassName(&＃39;check&＃39;); // 所有勾选框
    var checkAllInputs &＃61; document.getElementsByClassName(&＃39;check-all&＃39;) // 全选框
    var tr &＃61; table.children[1].rows; //行
    var selectedTotal &＃61; document.getElementById(&＃39;selectedTotal&＃39;); //已选商品数目容器
    var priceTotal &＃61; document.getElementById(&＃39;priceTotal&＃39;); //总计
    var deleteAll &＃61; document.getElementById(&＃39;deleteAll&＃39;); // 删除全部按钮
    var selectedViewList &＃61; document.getElementById(&＃39;selectedViewList&＃39;); //浮层已选商品列表容器
    var selected &＃61; document.getElementById(&＃39;selected&＃39;); //已选商品
    var foot &＃61; document.getElementById(&＃39;foot&＃39;);

    // 更新总数和总价格&＃xff0c;已选浮层
    function getTotal(){
        var selected &＃61; 0,price &＃61; 0, html &＃61; &＃39;&＃39;;
        for(var i &＃61; 0; i             if(tr[i].getElementsByTagName(&＃39;input&＃39;)[0].checked){
                tr[i].className &＃61; &＃39;on&＃39;;
                selected &＃43;&＃61; parseInt(tr[i].getElementsByTagName(&＃39;input&＃39;)[1].value);
                price &＃43;&＃61; parseFloat(tr[i].getElementsByTagName(&＃39;td&＃39;)[4].innerHTML);
                 html &＃43;&＃61; &＃39;

&＃39;;// 添加图片到弹出层已选商品列表容器
            }
            else{
                tr[i].className &＃61; &＃39;&＃39;;
            }
        }
        selectedTotal.innerHTML &＃61; selected; // 已选数目
        priceTotal.innerHTML &＃61; price.toFixed(2); // 总价
        selectedViewList.innerHTML &＃61; html;
        if (selected&＃61;&＃61;0) {
            foot.className &＃61; &＃39;foot&＃39;;
        }
    }
   

    // 计算单行价格
    function getSubtotal(tr) {
        var cells &＃61; tr.cells;
        var price &＃61; cells[2]; //单价
        var subtotal &＃61; cells[4]; //小计td
        var countInput &＃61; tr.getElementsByTagName(&＃39;input&＃39;)[1]; //数目input
        var span &＃61; tr.getElementsByTagName(&＃39;span&＃39;)[1]; //-号
        //写入HTML
        subtotal.innerHTML &＃61; (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
        //如果数目只有一个&＃xff0c;把-号去掉
        if (countInput.value &＃61;&＃61; 1) {
            span.innerHTML &＃61; &＃39;&＃39;;
        }else{
            span.innerHTML &＃61; &＃39;-&＃39;;
        }
    }

    // 点击选择框
    for(var i &＃61; 0; i         selectInputs[i].onclick &＃61; function () {
            if (this.className.indexOf(&＃39;check-all&＃39;) >&＃61; 0) { //如果是全选&＃xff0c;则吧所有的选择框选中
                for (var j &＃61; 0; j                     selectInputs[j].checked &＃61; this.checked;
                }
            }
            if (!this.checked) { //只要有一个未勾选&＃xff0c;则取消全选框的选中状态
                for (var i &＃61; 0; i                     checkAllInputs[i].checked &＃61; false;
                }
            }
            getTotal();//选完更新总计
        }
    }

    // 显示已选商品弹层
    selected.onclick &＃61; function () {
        if (selectedTotal.innerHTML !&＃61; 0) {
            foot.className &＃61; (foot.className &＃61;&＃61; &＃39;foot&＃39; ? &＃39;foot show&＃39; : &＃39;foot&＃39;);
        }
    }

    //已选商品弹层中的取消选择按钮
    selectedViewList.onclick &＃61; function (e) {
        var e &＃61; e || window.event;
        var el &＃61; e.srcElement;
        if (el.className&＃61;&＃61;&＃39;del&＃39;) {
            var input &＃61;  tr[el.getAttribute(&＃39;index&＃39;)].getElementsByTagName(&＃39;input&＃39;)[0]
            input.checked &＃61; false;
            input.onclick();
        }
    }

    //为每行元素添加事件
    for(var i &＃61; 0; i         //将点击事件绑定到tr元素
        tr[i].onclick &＃61; function(e){
            var e &＃61; e || window.event;
            var el &＃61; e.target || e.srcElement; //通过事件对象的target属性获取触发元素
            var cls &＃61; el.className; //触发元素的class
            var countInout &＃61; this.getElementsByTagName(&＃39;input&＃39;)[1]; // 数目input
            var value &＃61; parseInt(countInout.value); //数目
            //通过判断触发元素的class确定用户点击了哪个元素
            switch(cls){
                case &＃39;add&＃39;://点击了加号
                    countInout.value &＃61; value &＃43; 1;
                     getSubtotal(this);
                    break;
                case &＃39;reduce&＃39;:
                    if (value > 1) {
                        countInout.value &＃61; value - 1;
                        getSubtotal(this);
                    }
                    break;
                case &＃39;delete&＃39;: //点击了删除
                    var conf &＃61; confirm(&＃39;确定删除此商品吗&＃xff1f;&＃39;);
                    if (conf) {
                        this.parentNode.removeChild(this);
                    }
                    break;
            }
            getTotal();
        }

        // 给数目输入框绑定keyup事件
        tr[i].getElementsByTagName(&＃39;input&＃39;)[1].onkeyup &＃61; function () {
            var val &＃61; parseInt(this.value);
            if(isNaN(val) || val <&＃61;0){
                val &＃61; 1;
            }
            if(this.value !&＃61; val){
                this.value &＃61; val;
            }
            getSubtotal(this.parentNode.praentNode);//更新小计
            getTotal();//更新总数
        }


        // 点击全部删除
        deleteAll.onclick &＃61; function () {

            if(selectedTotal.innerHTML !&＃61;0) {
                var conf &＃61; confirm(&＃39;确定删除所选商品吗&＃xff1f;&＃39;);
                if(conf){
                    for(var i &＃61; 0; i                         // 如果被选中&＃xff0c;就删除相应的行
                        if(tr[i].getElementsByTagName(&＃39;input&＃39;)[0].checked){
                            tr[i].parentNode.removeChild(tr[i]);//删除节点
                            i--;//回退下标位置
                        }
                    }
                }
            }
            else{
                alert(&＃39;请选择商品&＃xff01;&＃39;);
            }
            getTotal(); //更新总数
        }

    // 默认全选
    checkAllInputs[0].checked &＃61; true;
    checkAllInputs[0].onclick();
}
 }