本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html> < html > < head > < title >购物车</ title > < meta charset = "utf-8" /> < style type = "text/css" > 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; } </ style > < script src = "jquery-3.2.1.min.js" ></ script > < script src = "gw.js" ></ script > </ head > < body > < h1 >真划算</ h1 > < table id = "tb1" > < tr > < th >商品</ th > < th >单价(元)</ th > < th >颜色</ th > < th >库存</ th > < th >好评率</ th > < th >操作</ th > </ tr > < tr > < td >罗技M185鼠标</ td > < td >80</ td > < td >黑色</ td > < td >893</ td > < td >98%</ td > < td align = "center" >< input type = "button" value = "加入购物车" onclick = "addshoping(this);" /></ td > </ tr > < tr > < td >微软X470键盘</ td > < td >150</ td > < td >黑色</ td > < td >9028</ td > < td >96%</ td > < td align = "center" >< input type = "button" value = "加入购物车" onclick = "addshoping(this);" /></ td > </ tr > < tr > < td >洛克iphone6手机壳</ td > < td >60</ td > < td >透明</ td > < td >672</ td > < td >99%</ td > < td align = "center" >< input type = "button" value = "加入购物车" onclick = "addshoping(this);" /></ td > </ tr > < tr > < td >蓝牙耳机</ td > < td >100</ td > < td >蓝色</ td > < td >8937</ td > < td >95%</ td > < td align = "center" >< input type = "button" value = "加入购物车" onclick = "addshoping(this);" /></ td > </ tr > < tr > < td >金士顿U盘</ td > < td >70</ td > < td >红色</ td > < td >482</ td > < td >100%</ td > < td align = "center" >< input type = "button" value = "加入购物车" onclick = "addshoping(this);" /></ td > </ tr > </ table > < h1 >购物车</ h1 > < table > < thead > < tr > < th >商品</ th > < th >单价(元)</ th > < th >数量</ th > < th >金额(元)</ th > < th >删除</ th > </ tr > </ thead > < tbody id = "goods" > </ tbody > < tfoot > < tr > < td colspan = "3" align = "right" >总计</ td > < td id = "total" ></ td > < td ></ td > </ tr > </ tfoot > </ table > </ body > </ html > |
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | //添加购物车 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 = $( '<tr>' + '<td>' + name + '</td>' + '<td>' + price + '</td>' + '<td align="center">' + '<input type="button" value="-" onclick="jian(this);"/> ' + '<input type="number" size="3" readonly value="1"/> ' + '<input type="button" value="+" onclick="increase(this);"/>' + '</td>' + '<td>' + price + '</td>' + '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' + '</tr>' ); 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); }; |
运行结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/218603/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)