用JS模拟购物车(jQuery实现)
2016-04-08 22:01
543 查看
jQueryShoppingCart.html
jQueryCart.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="js/jquery-1.11.1.js"></script> <script> function add_shoppingcart(btn) { var $tr = $(btn).parent().parent(); var name = $tr.children().eq(0).html(); var price = parseInt($tr.children().eq(1).html()); var $ntr = $( '<tr>'+ '<td>'+name+'</td>'+ '<td>'+price+'</td>'+ '<td align="center">'+ '<input type="button" value="-" onclick="reduce_amount(this);"/> '+ '<input type="text" size="3" readonly value="1"/>'+ '<input type="button" value="+" onclick="add_amount(this);"/> '+ '</td>'+ '<td>'+price+'</td>'+ '<td align="center"><input type="button" value="x" onclick="del_shoppingcart(this);"/></td>'+ '</tr>' ); var $tbody = $("#goods"); $tbody.append($ntr); changeTotal(); } function del_shoppingcart(btn) { var $tr = $(btn).parent().parent(); $tr.remove(); changeTotal(); } function reduce_amount(btn) { var amount = parseInt($(btn).next().val()); if(amount==0) { return; } amount--; $(btn).next().val(amount); var price = parseInt($(btn).parent().prev().html()); $(btn).parent().next().html(parseInt($(btn).parent().next().html())-price); changeTotal(); } function add_amount(btn) { var amount = parseInt($(btn).prev().val()); amount++; $(btn).prev().val(amount); var price = parseInt($(btn).parent().prev().html()); $(btn).parent().next().html(parseInt($(btn).parent().next().html())+price); changeTotal(); } function changeTotal() { var total = 0; var $trs = $("#goods tr"); var price = 0; $trs.each(function() { price = parseInt($(this).children().eq(3).html()); total += price }); $("#total").html(total); } </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 align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(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="add_shoppingcart(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="add_shoppingcart(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="add_shoppingcart(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="add_shoppingcart(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>
相关文章推荐
- jquery.validate全攻略
- jquery-问题解答
- jQuery的datagrid转换文字
- js jQuery 相关
- 【JQuery】cookie插件——cookie
- 2-jQuery - AJAX load() 方法【进阶篇】
- jQuery部分笔记
- jquery ajax跨域访问webservice配置
- 【JQuery】图片放大镜插件——jqzoom
- 【JQuery】图片灯箱插件——lightBox
- 关于JQuery 中表单提交中使用post方法,return false 不起作用解决办法
- jQuery的观察者模式详解 转载
- 【JQuery】表单插件——form
- HTML —— jquery如何判断checkbox(复选框)是否被选中
- 【JQuery】表单验证插件——validate
- jquery中使用setTimeout()
- jquery背景backgroundPosition插件
- 关于用jquery判断图片是否加载成功
- jquery.validate ajax提交
- jQuery全屏背景图片导航