标签：jQuery function js parseInt html cal var click
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
js+jquery
所需函数：
function cal（）：计算购物车里的价格，积分，数量等；
$(".add").click(function(){})：添加商品数量；
$(".sub").click(function(){})：减少商品数量；
$("#add").click(function(){})：添加新商品；
$(".del").click(function(){})：删除商品；
$("#control").click(function(){})：商品全选；
<script>
function cal(){
//设置三个全局变量来接受总数量，总积分，总价格
var allnum = 0;
var allsorce = 0;
var allprice = 0;
//通过类选择器拿到每一个商品数量框
$(".num").each(function(i,v){
var num = $(v).val();
var price = $(v).parent().prev().html();
var all = parseInt(num)*parseInt(price);
$(v).parent().next().html(all);
allnum+=parseInt(num);
allprice+=parseInt(all)
var jf = $(v).parent().prev().prev().html();
var alljf = parseInt(num)*parseInt(jf);
allsorce+=parseInt(alljf);
$("#allnum").html(allnum);
$("#alljf").html(allsorce);
$("#allmoney").html(allprice);
});
}
$(function(){
cal();
$(".add").click(function(){
var n = $(this).prev().val();
$(this).prev().val(parseInt(n)+1);
cal();
});
$(".sub").click(function(){
var n = $(this).next().val();
if(n>1){
$$(this).next().val(parseInt(n)-1);
cal();
}else{
var bet = confirm("要删除吗？")
if(bet){
$(this).parents("tr").remove();
cal();
}
}
});
$("#add").click(function(){
var $newNode=$("table tr:eq(2)").clone(true);
$("table tr:last").before($newNode);
cal();
});
$(".del").click(function(){
var bet = confirm("要删除吗？")
if(bet){
$(this).parents("tr").remove();
cal();
}
});
var flag = $("#control").val();
$("#control").click(function(){
if(flag){
$("input[type='checkbox']").attr("checked","true");
flag=false;
}else{
$("input[type='checkbox']").removeAttr("checked");
flag=true;
}
});
});
</script>
html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
table{
width: 800px;
margin: 0px auto;
font-size: 12px;
text-align: center;
}
td{
padding: 10px;
background-color: #E2F2FF;
}
.td_2 div{
float: left;
}
.td_2 div:last-of-type{
width: 260px;
margin-left:5px;
}
.td_2 p{
line-height: 20px;
text-align: left;
}
.num{
border: 1px solid powderblue;
width: 20px;
height: 20px;
text-align: center;
}
.sub,.add{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<input type="button" οnclick="cal();" value="aa"/>
<table>
<tr>
<td><input type="checkbox" id="control"/>全选</td>
<td>店铺宝贝</td><td>获积分</td><td>单价(元)</td>
<td>数量</td><td>小计(元)</td><td>操作 <input type="button" id="add" value="添加"/></td>
</tr>
<tr id="pro1">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_01.jpg"></div>
<div>
<p><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></p>
<p>颜色：棕色 尺码：37</p>
<p>保障:<img src="images/taobao_icon_01.jpg"> </p>
</div>
</td>
<td class="td_3">5</td>
<td class="td_4">138</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="1" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="pro2">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_02.jpg"></div>
<div>
<p><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a></p>
<p>保障:<img src="images/taobao_icon_01.jpg"> </p>
</div>
</td>
<td class="td_3">12</td>
<td class="td_4">265</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="1" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="pro3">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_03.jpg"></div>
<div>
<p><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a></p>
<p>保障:<img src="images/taobao_icon_01.jpg">
<img src="images/taobao_icon_02.jpg"></p>
</div>
</td>
<td class="td_3">3</td>
<td class="td_4">85</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="2" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="pro4">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_04.jpg"></div>
<div>
<p><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></p>
<p>保障:<img src="images/taobao_icon_01.jpg">
<img src="images/taobao_icon_02.jpg"></p>
</div>
</td>
<td class="td_3">12</td>
<td class="td_4">12</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="5" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="all">
<td colspan="7">
总数量:<span id="allnum"></span>
总积分:<span id="alljf"></span>
总金额:<span id="allmoney"></span>
</td>
</tr>
</table>
</body>
</html>
效果图：
标签：jQuery,function,js,parseInt,html,cal,var,click 来源： https://blog.csdn.net/wenhuabuzhijian/article/details/120190106
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。