jquery实现购物车功能（1）

本文实例为大家分享了jquery实现购物车功能的具体代码，供大家参考，具体内容如下

html

​









    
真划算
    

        

            
商品
            
单价(元)
            
颜色
            
库存
            
好评率
            
操作
        
        

            
罗技M185鼠标
            
80
            
黑色
            
893
            
98%
            

        
        

            
微软X470键盘
            
150
            
黑色
            
9028
            
96%
            

        
        

            
洛克iphone6手机壳
            
60
            
透明
            
672
            
99%
            

        
        

            
蓝牙耳机
            
100
            
蓝色
            
8937
            
95%
            

        
        

            
金士顿U盘
            
70
            
红色
            
482
            
100%
            

        
    
 
    
购物车
    

        

            

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

 
        
        

            

                
总计
                

                

            
        
    
 

js

//添加购物车
function addshoping(btn) {
 
        var name = $(btn).parent().siblings().eq(0).html()
        var price = $(btn).parent().siblings().eq(1).html()
 
         var trs = $("#goods tr")
         var nameArr = new Array();
         $.each(trs, function (index, value) {
             nameArr.push($(this).children('td').eq(0).text())
         })
        var $tr = $('' +
            '' + name + '' +
            '' + price + '' +
            '' +
            ' ' +
            ' ' +
            '' +
            '' +
            '' + price + '' +
            '' +
            '');
        var ishasName = nameArr.indexOf(name)
        
        if (ishasName >= 0) {
            var goodcount=trs.eq(ishasName).children('td').eq(2).children().eq(1).val()
            Number.parseInt(goodcount);
            trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount)
            var price=trs.eq(ishasName).children('td').eq(1).html()
             Number.parseInt(price)
             trs.eq(ishasName).children('td').eq(3).html(goodcount*price);
            
                
        } else {
 
           // $tr.insertAfter($("#goods tr:eq(0)"))
            $("#goods").append($tr);
         }
            var kucun = tds.eq(3).html()
   Number.parseInt(kucun)
   tds.eq(3).html(--kucun)
 
        sum()
    }
    //增加
    function increase(btn){
        var num=$(btn).prev().val()
        Number.parseInt(num);
        var bignew=$(btn).prev().val(++num)
        var price = $(btn).parent().prev().html();
        $(btn).parent().next().html(num*price);
        sum();
    
    };
    //减少
    function jian(btn){
        
        var num=$(btn).next().val()
        if(num<=1){
            return;
        }
        Number.parseInt(--num)
        var price = $(btn).parent().prev().html();
        var newprice=$(btn).parent().next().html();
        
        $(btn).parent().next().html(newprice-price);
        $(btn).next().val(num)
      
    sum()
    }
    //删除
    function del(btn){
       $(btn).parent().parent().remove()
       sum();
    }
    //总和
    function sum() {
// 获取tbody下的所有行
var $trs = $("#goods tr");
// 遍历他们
var sum = 0;
for (var i = 0; i < $trs.length; i++) {
    // 获取每一行
    var $tr = $trs.eq(i);
    // 获取该行中第四列的值(金额)
    var mny = $tr.children().eq(3).html();
    sum += parseFloat(mny);
}
// 写入到合计
$("#total").html(sum);
};

运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。