<!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 關注
- 1577 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消