模拟购物车
css部分：
<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>
html部分：
<h1>最划算</h1> <table> <tr> <th>商品</th> <th>单价(元)</th> <th>描述</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>武装直升机z_10</td> <td>200</td> <td>很酷</td> <td>107</td> <td>99%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>虎式坦克</td> <td>200</td> <td>火力猛，装甲厚</td> <td>178</td> <td>100%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>单兵望远镜</td> <td>132</td> <td>千里眼，哪里都能看</td> <td>134</td> <td>88%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>T-50战斗机</td> <td>250</td> <td>全球部署，精确打击</td> <td>235</td> <td>94%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>单兵火箭筒</td> <td>150</td> <td>携带方便，火力强悍</td> <td>241</td> <td>96%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>战术手雷</td> <td>100</td> <td>携带方便，爆破力强</td> <td>227</td> <td>96%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>L-81突击步枪</td> <td>100</td> <td>破环力大</td> <td>148</td> <td>100%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>K-91狙击步枪</td> <td>200</td> <td>精确度高</td> <td>201</td> <td>95%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>防弹头盔</td> <td>50</td> <td>有型</td> <td>141</td> <td>96%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> <tr> <td>03单兵靴</td> <td>200</td> <td>舒适</td> <td>163</td> <td>100%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </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>
js部分：
<script> //入购物车，声明的参数btn用来接收传入的this；而this就是用户正在点的按钮(DOM对象)。 function add_shoppingcart(btn) { //eq(i)类似于[i]/get(i)， //但是它返回的是jQuery对象。 var name = $(btn).parent().siblings().eq(0).html(); //按钮 td5 tds td0 商品名 //先在购物车汇总中遍历所有的商品名，如果有相同的商品名就不在汇总中创建新的商品 //获取汇总中tbody下所有的行 var $trs = $("#goods tr"); //设置一个开关 var sameName = false; //遍历他们 for(var i=0;i<$trs.length;i++) { //获取每一行 var $tr = $trs.eq(i); //获取该行中第1列的值(商品名/String) var shopName = $tr.children().eq(0).html(); // tds td0 商品名 if(shopName==name){ sameName = true; } } if(sameName==false){ var price = $(btn).parent().siblings().eq(1).html(); //按钮 td5 tds td1 单价 //alert(name + "," + price); //创建一行 var $tr = $('<tr>'+ '<td>'+name+'</td>'+ '<td>'+price+'</td>'+ '<td align="center">'+ '<input type="button" value="-" onclick="decrease(this);"/> '+ '<input type="text" 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>'); //将此行追加到tbody下 $("#goods").append($tr); sum(); } } //删除 function del(btn) { $(btn).parent().parent().remove(); sum(); } //加法 function increase(btn) { //获取按钮的哥哥的内容(数量/String) var amount = $(btn).prev().val(); //数量+1，再设置回文本框 $(btn).prev().val(++amount); //获取按钮的父亲的哥哥的内容(单价) var price = $(btn).parent().prev().html(); //计算金额=单价*数量 var mny = price*amount; //写入到按钮的父亲的弟弟里(金额) $(btn).parent().next().html(mny); sum(); } //减法 function decrease(btn) { //获取按钮的弟弟的内容(数量/String) var amount = $(btn).next().val(); //数量不能小于1 if(amount <= 1) { return; } //数量-1，再设置回文本框 $(btn).next().val(--amount); //获取按钮的父亲的哥哥的内容(单价) var price = $(btn).parent().prev().html(); //计算金额=单价*数量 var mny = price*amount; //写入到按钮的父亲的弟弟里(金额) $(btn).parent().next().html(mny); sum(); } //求合计 //获取所有的行并求合计，并不是获取 //某一个按钮所在的行，因此没有参数 function sum() { //获取tbody下所有的行 var $trs = $("#goods tr"); //遍历他们 var sum = 0; for(var i=0;i<$trs.length;i++) { //获取每一行 var $tr = $trs.eq(i); //获取该行中第4列的值(金额/String) var mny = $tr.children().eq(3).html(); // tds td3 金额 sum += parseFloat(mny); } //将合计值写入合计列 $("#total").html(sum); } </script>
