本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下
html
购物车 jquery实现购物车功能-百家乐凯发k8
商品 | 单价(元) | 颜色 | 库存 | 好评率 | 操作 |
---|---|---|---|---|---|
罗技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); };
运行结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。