| 本文实例为大家分享了jquery实现购物车功能的具体代码，供大家参考，具体内容如下 html <!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 //添加购物车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);};运行结果： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
jQuery实现表格行数据滚动效果
原生js实现拼图效果 |
