JS购物车

实现的主要逻辑：

1. • 随着数量加减，重新计算已选商品

function operate(){
    var spansParent = this.parentNode;
    console.log(this);
    var inputValue = spansParent.children[1].value;
    if(this.className=="jia"){
        inputValue++;
    }else{
        inputValue--;
        if(inputValue<1){
            alert("最后一个了，留下我吧！");
            inputValue=0;
        }
    }
    spansParent.children[1].value=inputValue;

    //小计
    var Parent = this.parentNode.parentNode.parentNode;
    var singlePrice = Parent.children[2].innerHTML;
    var subtotal = singlePrice*inputValue;
    Parent.children[4].innerHTML = subtotal;
    getTotal();
}

2. • 全选与反选

for(var i=0;i<check.length;i++){
    //全选和全不选
    allChecked.onclick = function () {
          for (var i = 0; i < check.length; i++) {
            check[i].checked = this.checked;
        }
        getTotal();
    }

    check[i].onclick = function (){
        var flag = true;
        for(var i=0;i<check.length;i++){
            if(!check[i].checked){
                flag = false;
                break;
            }
        }
        getTotal();
        allChecked.checked = flag;
    }
}

3. • 根据所选择的商品，计算所选商品数量，呈现在页面已选商品上

4. • 根据所选商品，计算小计之和，呈现在页面合计上

5. • 点击删除按钮，删除整行，并重新计算合计和已选商品

//删除
for(var i=0;i<del.length;i++){
    del[i].onclick=function (){
            var granp = this.parentNode.parentNode;
        granp.removeChild(this.parentNode);
        getTotal();
    };
}

这里将合计和已选商品封装为一个函数，方便调用：

function getTotal(){
    var selectNum = 0;
    var selectPrice = 0;
    for(var i=0;i<tr.length;i++){
        var haveCheck = tr[i].getElementsByTagName("input")[0];
        var subTot = tr[i].getElementsByTagName("td")[4].innerHTML;
        console.log(haveCheck);
        if (haveCheck.checked) {
            selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);
            selectPrice += parseInt(subTot);
        }
    }
    totalNum.innerHTML =  selectNum; //根据所选择的商品，计算所选商品数量，呈现在页面已选商品上
    totalPrice.innerHTML = selectPrice; //根据所选商品，计算小计之和，呈现在页面合计上
}

完整代码参考：购物车 · 佩琪/Js-Practice - 码云 - 开源中国 (gitee.com)