jQuery购物车功能实现代码

Html

Css

真划算

    
        商品
        单价(元)
        颜色
        库存
        好评率
        操作
    
    
        罗技M185鼠标
        80
        黑色
        893
        98%
        
    
    
        微软X470键盘
        150
        黑色
        9028
        96%
        
    
    
        洛克iphone6手机壳
        60
        透明
        672
        99%
        
    
    
        蓝牙耳机
        100
        蓝色
        8937
        95%
        
    
    
        金士顿U盘
        70
        红色
        482
        100%
        
    


购物车

    
        
            商品
            单价(元)
            数量
            金额(元)
            删除
        
    
    

    
    
        
            总计

商品	单价(元)	颜色	库存	好评率
罗技M185鼠标	80	黑色	893	98%
微软X470键盘	150	黑色	9028	96%
洛克iphone6手机壳	60	透明	672	99%
蓝牙耳机	100	蓝色	8937	95%
金士顿U盘	70	红色	482	100%

商品	单价(元)	数量	金额(元)	删除
总计

h1 {
	text-align:center;
}
table {
	margin:0 auto;
	width:60%;
	border:2px solid #aaa;
	border-collapse:collapse;
}
table th,table td {
	border:2px solid #aaa;
	padding:5px;
}
th {
	background-color:#eee;
}

//假装是从数据库获取到的数据----正常都是从数据库获取的数据  
var oList = [{
        "name": "罗技M185鼠标",
        "price": 80,
        "color": "黑色",
        "repertory": 5,
        "feedback": "98%"
    },
    {
        "name": "微软X470键盘",
        "price": 150,
        "color": "黑色",
        "repertory": 9028,
        "feedback": "96%"
    },
    {
        "name": "洛克iphone6手机壳",
        "price": 60,
        "color": "透明",
        "repertory": 672,
        "feedback": "99%"
    },
    {
        "name": "蓝牙耳机",
        "price": 100,
        "color": "蓝色",
        "repertory": 8937,
        "feedback": "95%"
    },
    {
        "name": "金士顿U盘",
        "price": 70,
        "color": "红色",
        "repertory": 482,
        "feedback": "100%"
    }
]
// 将数据渲染到table中
var oStr = "";
$.each(oList, function(k, v) {
    // console.log(v)
    oStr += "<tr><td>" +
        v.name + "</td><td>" +
        v.price + "</td><td>" +
        v.color + "</td><td>" +
        v.repertory + "</td><td>" +
        v.feedback + "</td><td align='center'><input type='button' value='加入购物车' onclick='add_shoppingcart(this)'/></td></tr>"

})
$("#table1").append(oStr);

function add_shoppingcart(btn) { //将btn(dom)转换为jQuery对象  
    //先获取商品名字和单价还有库存以备后面使用  
    var oTds = $(btn).parent().siblings();
    //oTds.eq(0)是jQuery对象  oTds[0]是DOM对象  
    var oName = oTds.eq(0).html(); //产品名称  
    var oPrice = oTds.eq(1).html(); //产品单价 
    var oStock = oTds.eq(3).html(); //产品库存

//查看库存是否还有<=0  
    if (oStock <= 0) {
        return;
    }

//无论购物车中是否有该商品,库存都要-1  
    oTds.eq(3).html(--oStock);

//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行  
    var oTrs = $("#goods>tr");
    for (var i = 0; i < oTrs.length; i++) {
        var oGtds = oTrs.eq(i).children(); //获取单元格 
        var goName = oGtds.eq(0).html(); //产品名称
        if (oName == goName) { //若存在  
            var num = parseInt(oGtds.eq(2).children().eq(1).val()); //获取文本框的值 
            oGtds.eq(2).children().eq(1).val(++num); //数量+1  
            //金额从新计算  
            oGtds.eq(3).html(oPrice * num);
            return; //后面代码不再执行  
        }
    }
    //若不存在,创建后追加  
    var li = "<tr><td>" +
        oName + "</td><td>" +
        oPrice + "</td><td align='center'><input type='button' value='-' onclick='decrease(this);'/><input type='text' size='3' readonly value='1'/> " +
        "<input type='button' value='+' onclick='increase(this);'/></td><td>" +
        oPrice + "</td><td align='center'><input type='button' value='x' onclick='del(this);'/></td></tr>";
    //追加到#goods后面  
    $("#goods").append($(li));

//总计功能  
    total();
}

//辅助方法--单击购物车中的"+"  "-"  "x"按钮是找到相关商品所在td,以jQuery对象返回  
function findoStock(btn) {
    var oName = $(btn).parent().siblings().eq(0).html(); //获取商品名字  
    //注意table默认有行分组,若此处使用 $("#table1>tr:gt(0)")则找不到任何tr  
    var oTrs = $("#table1>tbody>tr:gt(0)");
    for (var i = 0; i < oTrs.length; i++) {
        var foName = oTrs.eq(i).children().eq(0).html();
        if (oName == foName) { //找到匹配的商品  
            return oTrs.eq(i).children().eq(3);
        }
    }
}

//增加"+"功能  
function increase(btn) {
    //获取该商品库存看是否<=0  
    var $oStock = findoStock(btn);
    var oStock = $oStock.html();
    if (oStock <= 0) {
        return;
    }
    //库存-1    
    $oStock.html(--oStock);
    //购物车数据改变  
    var $td = $(btn).prev();
    var num = parseInt($td.val()); //number  
    //num此时为number类型(在计算时会自动转换为number类型)  
    $td.val(++num);
    //获取单价,再加计算前要先转换为number类型  
    var oPrice = parseInt($(btn).parent().prev().html());
    $(btn).parent().next().html(num * oPrice);

//总计功能  
    total();
}

//减少"-"功能  
function decrease(btn) {
    //该商品数量=1时候不能再减少  
    var num = parseInt($(btn).next().val());
    if (num <= 1) {
        return;
    }
    var $oStock = findoStock(btn);
    //库存+1  
    var oStock = $oStock.html();
    $oStock.html(++oStock);
    //商品数量-1  
    $(btn).next().val(--num);
    //从新计算金额  
    var oPrice = parseInt($(btn).parent().prev().html());
    $(btn).parent().next().html(oPrice * num);

//总计功能  
    total();
}

//"x"删除按钮功能  
function del(btn) {
    //将商品数量归还库存  
    var $oStock = findoStock(btn);
    var oStock = parseInt($oStock.html());
    var num = parseInt($(btn).parent().prev().prev().children().eq(1).val());
    $oStock.html(num + oStock);
    //清空改行商品列表  
    $(btn).parent().parent().remove();

//总计功能  
    total();
}
//总计功能  
function total() {
    //获取所有购物车中的trs  
    var oTrs = $("#goods tr");
    var amount = 0;
    for (var i = 0; i < oTrs.length; i++) {
        var money = parseInt(oTrs.eq(i).children().eq(3).html());
        amount += money;
    }
    //写入总计栏  
    $("#total").html(amount);
}

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

立即下载

jQuery购物车功能实现代码



代码描述：简单的购物车功能实现增删改查

更新时间：2021-10-11 13:48:13
购物车的数据增删改查

1

最新

发表评论全部评论

暂时没有评论！

救救孩子0

2021/10/12 9:35:54

单击数量+-无效只能点加入购物车增加数量总价计算有问题不能删除购物车里面的商品
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

璇枢

相关代码

真划算

购物车

jQuery购物车功能实现代码

最新