使用jQuery实现简单的购物车功能

<!DOCTYPE html>
<html><head><title>购物车</title><meta charset="utf-8" /><!-- 引入jquery文件 --><script src="js/jquery.min.js"></script><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;}</style><script type="text/javascript">//页面加载后执行$(function(){//为添加购物车按钮注册点击事件$("input[type='button'][value='加入购物车']").click(function(){var productName = $(this).parent().siblings("td:first").text();var price = $(this).parent().siblings("td:eq(1)").text();//判断库存var stockTd = $(this).parent().siblings("td:eq(3)");var stock = stockTd.text();if (stock == 0) {alert("已售完..")return;} else {stockTd.text(parseInt(stock)-1);}//判断是否重复添加var flag = false; // 不重复$(".productName").each(function(){var name = $(this).text();if (name == productName) { //重复了//修改数量var input = $(this).siblings("td:eq(1)").find("input:eq(1)");var oldNum = input.val();var newNum = parseInt(oldNum)+1;input.val(newNum);//修改金额$(this).siblings("td:eq(2)").text(parseFloat(price)*newNum);//计算总金额totalMoney();flag = true;  //重复了  }});if(flag) {return;}//组装一条数据var html =     '<tr>'+'<td class="productName">'+productName+'</td>'+'<td>'+price+'</td>'+'<td align="center">'+'<input type="button" value="-" οnclick="changeNum(-1, this)"/>'+'<input type="text" size="3" readonly value="1"/>'+'<input type="button" value="+" οnclick="changeNum(1, this)"/>'+'</td>'+'<td class="moneyTd">'+price+'</td>'+'<td align="center"><input οnclick="del(this);" type="button" value="x"/></td>'+'</tr>';$("#goods").append(html);    //计算总金额 totalMoney();});    });//计算总金额function  totalMoney() {var money = 0;$(".moneyTd").each(function(){money += parseFloat($(this).text());});$("#total").text(money);    }//修改商品数据及金额function changeNum(num, btn) {//修改库存//获取购物车中的商品名称var productName = $(btn).parent().siblings("td:first").text();//获取购物车中商品数量var input = $(btn).parent().find("input:eq(1)");var oldNum =parseInt( input.val())  ;//标记var flag = true; //是否还有库存$("[name='productName']").each(function(){var pname = $(this).text();//当名称相同时执行操作if (productName == pname) {//获取库存中商品数量var stockTd = $(this).siblings("td:eq(2)");var stock = stockTd.text();//当库存为0时，不能再添加了if (stock == 0 && num ==1) {flag = false; //没有库存} else if(oldNum == 1 && num ==-1){flag = false; //没有库存}else{//改变库存数量stockTd.text(parseInt(stock)-num);}}});if(!flag) {return;}//当购物车中数量为0时，便不在减少if(oldNum == 0&& num ==-1 ){return ;}else{var newNum = parseInt(oldNum)+num;input.val(newNum);}var tr = $(btn).parent().parent();var price = tr.find("td:eq(1)").text();tr.find("td:eq(3)").text(parseFloat(price)*newNum);//计算总金额    totalMoney();}//删除商品function del(btn) {if (confirm("确认删除此商品？")) {$(btn).parent().parent().remove();//获取购物车中的商品名称var productName = $(btn).parent().siblings("td:first").text();//获取购物车中商品数量var input = $(btn).parent().siblings("td:eq(2)").find("input:eq(1)");var Num = parseInt( input.val()) ;$("[name='productName']").each(function(){var pname = $(this).text();//当名称相同时执行操作if (productName == pname) {//获取库存中商品数量var stockTd = $(this).siblings("td:eq(2)");var stock = stockTd.text();//改变库存数量stockTd.text(parseInt(stock)+Num);}});}//计算总金额 totalMoney();}</script></head><body><h1>真划算</h1><table><tr><th>商品</th><th>单价(元)</th><th>颜色</th><th>库存</th><th>好评率</th><th>操作</th></tr>   <tr><td name="productName">罗技M185鼠标</td><td>80</td><td>黑色</td><td>6</td><td>98%</td><td align="center"><input type="button" value="加入购物车"/></td></tr><tr><td name="productName">微软X470键盘</td><td>150</td><td>黑色</td><td>7</td><td>96%</td><td align="center"><input type="button" value="加入购物车"/></td></tr><tr><td name="productName">洛克iphone6手机壳</td><td>60</td><td>透明</td><td>8</td><td>99%</td><td align="center"><input type="button" value="加入购物车"/></td></tr><tr><td name="productName">蓝牙耳机</td><td>100</td><td>蓝色</td><td>10</td><td>95%</td><td align="center"><input type="button" value="加入购物车"/></td></tr><tr><td name="productName">金士顿U盘</td><td>70</td><td>红色</td><td>9</td><td>100%</td><td align="center"><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 id="goods"></tbody><tfoot><tr><td colspan="3" align="right">总计</td><td id="total">0</td><td></td></tr></tfoot></table>    </body>
</html>

使用jQuery实现简单的购物车功能相关推荐

html+css+jquery实现简单的购物车功能
HTML网页代码 <!DOCTYPE html> <html lang="en"> <head> </head> <body& ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
jquery实现简单的分页功能
jquery实现简单的分页功能本文适合少量数据的使用,如果数据条数过多,不太适合! 页面html代码 <table>  </table> ...
使用JavaScript实现简单的购物车功能
使用JavaScript完成购物车功能可以通过加入购物车按钮实现商品的添加,并且数量的加减.购物车中的删除都会进行商品库存的改变 <!DOCTYPE html> <html> ...
jQuery UI 实现仿购物车功能简洁的js
效果图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
vuex——做简单的购物车功能
购物车组件 <template><div><h1>vuex-shopCart</h1><div class="shop-listbox& ...
jQuery最简单的留言功能^-^
先上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
uniapp实现购物车功能
uniapp实现购物车功能周六我看见一个有个公司招聘需要试岗3天,并使用uniapp完成购物车,直播间,地图,首页四个功能方能通过,于是乎,我趁手上没事就打算自己写一遍,虽然我的项目没用到,但是多掌 ...
jQuery实现简单购物车功能
jQuery实现购物车功能有: 主要有添加商品增加和减少商品数量点击购物车时库存也相应的减少数量的减少库存进行增加根据增加.减少或选择的商品获取金额实现商品价格的计算删除 ...

使用jQuery实现简单的购物车功能

使用jQuery实现简单的购物车功能

使用jQuery实现简单的购物车功能相关推荐

最新文章

热门文章