16 - 购物车案例

var check = getClass("check");
var cartTable = document.getElementById("cartTable");
var tr = cartTable.tBodies[0].rows;
var priceTotal = document.getElementById("priceTotal");
var foot = document.getElementById("foot");
var selectedViewList = document.getElementById("selectedViewList");

//获取所有 check
function getClass(check){
    var arr = [];
    var doms = document.getElementsByTagName("*");
    for(var i = 0; i<doms.length; i++){
        if(doms[i].className == check || doms[i].className.indexOf(""+check) != -1 || doms[i].className.indexOf(check+"") != -1){
             arr.push(doms[i]);
        }
     }
     return arr;
 }

//添加全选
for(var i=0;i<check.length;i++){
    check[i].onclick = function(){
        if(this.className == "check-all check"){
            for(var i=0;i<check.length;i++){
                check[i].checked = this.checked;
            }
        }
        getTotal()
    }
}


//查看已勾选商品
foot.onclick = function(){
    if(selectedTotal.innerHTML != 0){
        this.className = "foot show";
    }else{
        this.className = "foot";
    }
}



//取消商品
selectedViewList.onclick = function(e){
    var e = window.event || e;
    var tar = e.target || e.srcElement;

    if(tar.nodeName == "SPAN"){
        tr[tar.getAttribute("index")].getElementsByTagName("input")[0].checked = false;
        tr[tar.getAttribute("index")].getElementsByTagName("input")[0].onclick()
    }
    
}

//加减 
for(var i=0;i<tr.length;i++){
    tr[i].onclick =function(e){
        var input = this.getElementsByTagName("input")[1];
        var e = window.event || e;
        var tar = e.target || e.srcElement;
        var val = parseInt(input.value);

        switch(tar.className){
            case "add":
                input.value = val+1;
                subTotal(this);
                break;
            case "reduce":
                if(val <= 1){
                    val =1;    
                }else{
                    input.value = val-1;
                }
                subTotal(this);
                break;
            case "delete":
                this.parentNode.removeChild(this);
                break;
        }
        getTotal();
    }
}

//加减优化小计
function subTotal(tr){
//小计
    var td2 = tr.cells[2];
    var td4 = tr.cells[4];
    var inputs = tr.getElementsByTagName("input")[1];
    td4.innerHTML = (td2.innerHTML * inputs.value).toFixed(2); 


//-
    var reduce = tr.getElementsByTagName("span")[1];
    if(tr.getElementsByTagName("input")[1].value == 1){
        reduce.innerHTML = "";
    }else{
        reduce.innerHTML = "-";
    }
}



//结算添加   函数
function getTotal(){
    var select = 0;
    var price = 0;
    var lis = "";

    for(var i=0; i<tr.length; i++){
        if(tr[i].getElementsByTagName("input")[0].checked){
            
            select += parseInt(tr[i].getElementsByTagName("input")[1].value);

            price += parseFloat(tr[i].cells[4].innerHTML);
            
            lis += "<div><img src='"+tr[i].getElementsByTagName("img")[0].src+"'><span index='"+ i +"'>取消选择</span></div>"
        } 
    }
    selectedTotal.innerHTML = select;
    priceTotal.innerHTML = price.toFixed(2);
    selectedViewList.innerHTML = lis;
}