jquery实现购物车功能（1） jquery实现购物车功能（1）

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

?购物车 - 锐客网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; }真划算
商品单价(元) 颜色库存好评率操作
罗技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%

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

//添加购物车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); };

运行结果：