<!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中的小计,最后计算总价。
我比较困惑的一点是,我可以实现一行的功能,自己对当前获取的元素能力不够,写出来都是全部值都一起改变了。然后没有什么思路代码很凌乱,将就看看。谢谢耐心看完的小伙伴哦~
冰封灬尘世
如何用jquery获取多个 下拉列表所选中的值 ?
chrome下如何获取样式是怎样的
如何获取JSP中的中value中的值
jq如何获取url的参数比如url是 www.imooc.com/code/2323 我要获取code这个参数的值是2323