<!DOCTYPE html><html><head><meta charset="UTF-8"><title>简易购物车功能</title><!-- <link rel="stylesheet" type="text/css" href="css/demo.css"> --><!-- <link rel="stylesheet" type="text/css" href="css/iconfont.css"> --><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><style type="text/css"> *{padding: 0;margin: 0} .mian{width: 500px;margin: 0 auto;margin-top: 20px;} table{text-align: center;} button{border: 0;background-color: #000;color: #fff;border-radius: 50%;width: 25px;height: 25px;margin: 10px;font: 18px/25px "微软雅黑";font-weight: bolder;outline:none} input{width: 15px;height: 15px;} em{font-style: normal;} </style></head><body> <div> <table border=" " cellpadding="0" cellspacing="0" width="500px" id="tableList" > <caption>简易购物车</caption> <tr> <td>选择</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>小计</td> </tr> <tr> <td> <input type="checkbox" name="" value="" class="zuzhi" /> </td> <td>鞋子</td> <td><em>2</em>元/双</td> <td><button class="minus zuzhi">-</button><em>5</em><button class="add zuzhi">+</button></td> <td>￥<em>10</em></td> </tr> <tr> <td> <input type="checkbox" name="" value="" /> </td> <td>鞋子</td> <td><em>2</em>元/双</td> <td> <button class ="minus zuzhi">-</button><em>5</em><button class="add zuzhi">+</button> </td> <td>￥<em>10</em></td> </tr> <tr><td colspan="5">总价：￥<em>10</em></td></tr> </table> </div> <script type="text/javascript"> $(".minus").click(function(){ var number=$(this).siblings("em"); var haha=number.html(); // console.log(haha); if(haha>0){ var newN=Number(haha)-1; number.html(newN); return newN }}); $(".add").click(function(){ var number=$(this).siblings("em"); var haha=number.html(); // console.log(haha); if(haha>=0){ var newN=Number(haha)+1; number.html(newN); return newN }});//点击优化$("#tableList .trList").click(function(){ var checked=$(this).find("input[type=checkbox]"); var flag=checked.prop("checked")?true:false; checked.prop("checked",!flag); // if(checked.prop("checked",false)){ // }})function jisuan(a,b){ var sum=Number(a*b); return sum;}var allNum=0;$("tr").each(function(){ var a=$(this).find('.price').text(); console.log(a); var thisNumber=$(this).data("number"); allNum=allNum+thisNumber})$(".zuzhi").click(function(e){ e.stopPropagation();})// $("tr").click(function(){// var aa=$(this).find("tr");// console.log(aa);// if(input[type=checkbox].prop("checked")){// $("input[type=checkbox]").prop("checked",false);// alert("取消！")// }else{// $("input[type=checkbox]").prop("checked",true);// alert("选中！")// }// })// 百度的// $('table').on('click', 'tr', function () {// var checkbox=$(this).find("input[type=checkbox]"); // // checkbox.prop("checked", !checkbox.prop("checked"));// if(checkbox.prop("checked")){// checkbox.prop("checked",false);// alert("取消！")// }else{// checkbox.prop("checked",true);// alert("选中！")// }// });</script></body></html>我想要是实现的是：点击哪一行的tr （或者多选tr），然后可以点击 按钮 - 和+ 来控制数量，计算 tr中的小计，最后计算总价。我比较困惑的一点是，我可以实现一行的功能，自己对当前获取的元素能力不够，写出来都是全部值都一起改变了。然后没有什么思路代码很凌乱，将就看看。谢谢耐心看完的小伙伴哦~
- 1 回答
- 0 关注
- 1501 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消