简单js购物车代码

PROMULGATOR

??

河南省济源市

← css3D凹凸效果按钮代码

→ 登录界面代码

相关代码

Html

Css

Js


    
        
            全选 
            商品
            单价
            数量
            操作
        
    
    
        
            
            ![](../img2/1.png)
            3
            
            
        
        
            
            ![](../img2/2.png)
            3
            
            删除


        
        
            
            ![](../img2/3.png)
            3
            
            删除


        
    
    
        
            总价:
            
        
    


删除选中项

  .table {
	text-align:center;
}
.table img {
	width:50px;
}
.a {
	text-decoration:none;
	color:red;
}

window.onload = function() {
    document.getElementById("ckAll").onclick = function() { //当点击全选的复合框时触发事件
        var cks = document.getElementsByName("ck"); //获取ck对象
        for (var i = 0; i < cks.length; i++) { //循环得到单个tr
            cks[i].checked = this.checked; //得到的每个tr的点击都等于ckAll的点击
        }
    }
    var cks = document.getElementsByName("ck"); //创建ck对象
    for (var i = 0; i < cks.length; i++) { //循环得到单个tr
        cks[i].onclick = function() { // 当点击每个当tr的时候都会触发点击事件
            for (var i = 0; i < cks.length; i++) { // 循环得到单个td
                if (!cks[i].checked) { //如果单个特点的点击等于false 就返回
                    document.getElementById("ckAll").checked = false; //那么ckAll就等于false
                    return;
                }
            }
            document.getElementById("ckAll").checked = true; //否则就等于true 说明为全选状态
        }
    }
    getSum();

function getSum() { //计算的方法
        var tbody = document.getElementsByTagName("tbody")[0]; //创建tbody对象
        var sum = 0; //先定义sum为0
        for (var i = 0; i < tbody.children.length; i++) { //循环得到tr
            var tr = tbody.children[i]; //tbody中的子节点就是tr
            var td = tr.children; //tr的子节点是 td
            var price = parseFloat(td[2].innerText); //td的第二列是价格 得到价格
            var count = parseFloat(td[3].children[0].value); //第三列是数量
            sum += price * count; //总和就等于价格*数量
            td[3].children[0].onblur = function() { //当失去焦点的时候触发事件
                getSum();
            }
        }
        var tfoot = document.getElementsByTagName("tfoot")[0]; //创景tfoot对象
        tfoot.children[0].children[1].innerHTML = sum; //tfootd子节点 等于总和
    }

var dels = document.getElementsByClassName("del"); //创建del对象
    for (var i = 0; i < dels.length; i++) { //循环得到
        dels[i].onclick = function() {
            this.parentNode.parentNode.remove();
            getSum();
        }
    }
    document.getElementsByClassName("dels")[0].onclick = function() {
        var cks = document.getElementsByName("ck");
        for (var i = cks.length - 1; i >= 0; i--) {
            if (cks[i].checked) {
                cks[i].parentNode.parentNode.remove();
            }
        }
        getSum();

}

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单js购物车代码



代码描述：虽然不是很美观但是很好用

更新时间：2021-06-04 08:56:50
这里的js每一条都有注释，看不懂的可以学习一下

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单js购物车代码-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号