简单购物车功能

Html

Css

  真划算
    
        
            
                商品
                单价
                颜色
                库存
                好评率
                操作
            
        
        
            
                罗技M185鼠标
                80
                黑色
                666
                98%
                
            
            
                微软X470键盘
                150
                黑色
                999
                98%
                
            
            
                苹果iphone10手机壳
                60
                透明
                333
                98%
                
            
            
                蓝牙耳机
                100
                蓝色
                5651
                99%
                
            
            
                金士顿U盘
                79.8
                金色
                212
                98%
                
            
        
    

    购物车
    
        
            
                商品
                单价
                数量
                金额
                删除
            
        
        
            
        
        
            
                总计

商品	单价	颜色	库存	好评率
罗技M185鼠标	80	黑色	666	98%
微软X470键盘	150	黑色	999	98%
苹果iphone10手机壳	60	透明	333	98%
蓝牙耳机	100	蓝色	5651	99%
金士顿U盘	79.8	金色	212	98%

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

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

function add_shoppingcar(btn) {
    var tds = $(btn).parents('tr').children('td');
    var name = $(tds[0]).html();
    var price = $(tds[1]).html();
    var kc = parseInt($(tds[3]).html());
    kc = kc - 1;
    $(tds[3]).html(kc);
    $trtd = $('<tr>' + '<td>' +
        name +
        '</td>' +
        '<td>' +
        price +
        '</td>' +
        '<td align="center">' +
        '<input class="btn btn-primary" type="button" value="-"  onclick="change(this,-1)"   />' +
        '<input  style="text-align: center"    type="text" class="dclass"  size="1"   readonly value="1">' +
        '<input class="btn btn-primary" type="button" value="+"  onclick="change(this,1)"  />' +
        '</td>' + '<td>' + price + '</td>' + '<td align="center">' +
        '<input class="btn btn-primary" type="button" value="X" onclick="del(this);" />' +
        '</td>' + '</tr>')
    $("#tb2").append($trtd);
    total();

}
//删除
function del(btn) {
    var tr1 = $('.t1class').children("tr");
    for (var i = 0; i < tr1.length; i++) {
        var tds = $(tr1[i]).children("td");
        var kc = parseInt($(tds[3]).html());
        var bs2 = $(tr1[i]).children(1).html();
        var bs = $(btn).parents('tr').children(0).html();
        if (bs == bs2) {
            var inputs = $(btn).parent().parent("tr").children(2).children();
            var amount = parseInt($(inputs[1]).val());
            kc = kc + amount;
            $(tds[3]).html(kc);
        }

}
    $(btn).parent().parent().remove();
    total();
}
//总计
function total() {
    var trs = $("#tb2").children("tr");
    var sum = 0;
    for (var i = 0; i < trs.length; i++) {
        var tds = $(trs[i]).children("td");
        var m = $(tds[3]).html();
        sum += parseFloat(m);
    }
    $("#total").html(sum);
}
//增加减少
function change(btn, n) {
    var inputs = $(btn).parent().children("input");
    var amount = parseInt($(inputs[1]).val());
    if (amount <= 1 && n < 0) {
        return;
    }
    $(inputs[1]).val(amount + n);
    var tr1 = $('.t1class').children("tr");
    for (var i = 0; i < tr1.length; i++) {
        var bs = $(btn).parents('tr').children(0).html();
        var bs2 = $(tr1[i]).children(1).html();
        var tds = $(tr1[i]).children("td");
        var kc = parseInt($(tds[3]).html());
        if (bs == bs2) {
            kc = kc - n;
            $(tds[3]).html(kc);
        }
    }
    amount = $(inputs[1]).val();
    var tds = $(btn).parents('tr').children('td');
    var price = parseFloat($(tds[1]).html());
    var m = amount * price;
    $(tds[3]).html(m);
    total();
}

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

立即下载

简单购物车功能



代码描述：实现添加商品至购物车功能，计算总价等

纯jquery编写的简单的购物车功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

寒潭

相关代码

真划算

购物车

简单购物车功能

最新