<!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="https://www.jb51.net/jquery-3.2.1.min.js"></script> <script src="https://www.jb51.net/article/gw.js"></script> </head> <body> <h1>真划算</h1> <table> <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><input type="button" value="加入购物车" /></td> </tr> <tr> <td>微软X470键盘</td> <td>150</td> <td>黑色</td> <td>9028</td> <td>96%</td> <td><input type="button" value="加入购物车" /></td> </tr> <tr> <td>洛克iphone6手机壳</td> <td>60</td> <td>透明</td> <td>672</td> <td>99%</td> <td><input type="button" value="加入购物车" /></td> </tr> <tr> <td>蓝牙耳机</td> <td>100</td> <td>蓝色</td> <td>8937</td> <td>95%</td> <td><input type="button" value="加入购物车" /></td> </tr> <tr> <td>金士顿U盘</td> <td>70</td> <td>红色</td> <td>482</td> <td>100%</td> <td><input type="button" value="加入购物车" /></td> </tr> </table> <h1>购物车</h1> <table> <thead> <tr> <th>商品</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>删除</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <td colspan="3">总计</td> <td></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>' + '<input type="button" value="-"/> ' + '<input type="number" size="3" readonly value="1"/> ' + '<input type="button" value="+"/>' + '</td>' + '<td>' + price + '</td>' + '<td><input type="button" value="x"/></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); };
运行结果：
