添加删除jq商城购物车

zoukankan html css js c++ java

添加删除jq商城购物车

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery购物车数量加减合计代码 - 站长素材</title>

<link rel="stylesheet" href="css/style.css" />

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<style type="text/css">
* {
font-size: 14px;
font-family: "寰�蒋闆呴粦";
vertical-align: middle;
margin: 0;
padding: 0;
}

img {
160px;
height: 120px;
}

/*span{display: inline-block;}*/

.imfor_top div {
height: 40px;
background-color: deepskyblue;
font-weight: bold;
}

.imfor div {
height: 140px;
line-height: 120px;
}

.imfor:hover {
background: RGB(238, 246, 255);
}

.check,
.check_top {
70px;
}

.pudc,
.pudc_top {
400px;
}

.pices,
.pices_top {
60px;
}

.totle {
color: red;
}

.num,
.num_top {
90px;
}

.num input {
40px;
}

.num span {
height: 23px;
17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
cursor: pointer;
}

.totle,
.totle_top {
60px;
}

.del,
.del_top {
60px;
cursor: pointer;
}

.imfor_top div,
.imfor div {
float: left;
border: 1px solid deepskyblue;
text-align: center;
}

.imfor_top,
.imfor {
800px;
}

.foot {
float: inherit;
}

#box,
#content_box {
800px;
margin: 0 auto;
}

.foot_add,
.foot_del {
float: left;
cursor: pointer;
margin-left: 10px;
margin-top: 14px;
}

.foot {
800px;
background-color: #eaeaea;
}

.foot_tol,
.foot_cash {
float: right;
cursor: pointer;
80px;
margin-top: 14px;
margin-left: 100px;
}

#susum {
color: red;
}
</style>
</head>

<body>clear:both;
<div id="box">
<div id="content_box">
<div class="imfor_top">
<div class="check_top">
<input type="checkbox" id="all" />全选
</div>
<div class="pudc_top">商品</div>
<div class="pices_top">单价</div>
<div class="num_top">数量</div>
<div class="totle_top">小计</div>
<div class="del_top">操作</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/1.jpg" /><span>Casio/卡西欧 EX-TR350</span></div>
<div class="pices">5999.8</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">5999.8</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/2.jpg" /><span>Canon/佳能 PowerShot SX50 HS</span></div>
<div class="pices"> 3888.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">3888.5</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/3.jpg" /><span>Sony/索尼 DSC-WX300</span></div>
<div class="pices">1428.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">1428.5</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/4.jpg" /><span>Fujifilm/富士 instax mini 25</span></div>
<div class="pices">640.6</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">640.6</div>
<div class="del">删除</div>
</div>
</div>
<div class="foot">
<div class="foot_add">添加一行</div>
<div class="foot_del">全部删除</div>
<div class="foot_cash">结算</div>
<div class="foot_tol"><span>合计：￥</span><span id="susum">0</span></div>
</div>
</div>

<script type="text/javascript">

$(function() {
totl();
adddel()
//全选
$("#all").click(function() {
all = $(this).prop("checked")
$(".Each").each(function() {
$(this).prop("checked", all);
})
})
//删除当前行
$(".del").each(function() {
$(this).click(function() {
$(this).parent().remove();
if($(".imfor").length == 0) {
$("#susum").text(0);
}
totl();
})
})
//添加一行
$(".foot_add").click(function() {
var str = '<div class="imfor">' +
'<div class="check">' +
'<input type="checkbox" class="Each" />' +
'</div>' +
'<div class="pudc"><img src="img/5.jpg" /><span>Fujifilm/富士 instax mini 25</span></div>' +
'<div class="pices">640.6</div>' +
'<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>' +
'<div class="totle">640.6</div>' +
'<div class="del">删除</div>' +
'</div>';
$(this).parent().prev().append(str);
totl();
adddel()
$(".del").each(function() {
$(this).click(function() {
$(this).parent().remove();
totl();
})
})
})
//全选删除
$(".foot_del").click(function() {
$(".Each").each(function() {
if($(this).prop('checked')) {
$(this).parents(".imfor").remove();
totl();
if($(".imfor").length == 0) {
$("#susum").text(0);
}
}
})

})

})
//合计
function totl() {
var sum = 0;
$(".totle").each(function() {
sum += parseFloat($(this).text());
$("#susum").text(sum);
})
}
function adddel(){
//小计和加减
//加
$(".add").each(function() {
$(this).click(function() {
var $multi = 0;
var vall = $(this).prev().val();
vall++;
$(this).prev().val(vall);
$multi = parseFloat(vall) * parseFloat($(this).parent().prev().text());
$(this).parent().next().text(Math.round($multi));
totl();
})

})
//减
$(".reduc").each(function() {
$(this).click(function() {
var $multi1 = 0;
var vall1 = $(this).next().val();
vall1--;
if(vall1 <= 0) {
vall1 = 1;
}
$(this).next().val(vall1);
$multi1 = parseFloat(vall1) * parseFloat($(this).parent().prev().text());
$(this).parent().next().text(Math.round($multi1));
totl();
})

})
}
</script>
</div>
</body>
</html>

查看全文

相关阅读:
光猫改桥接，默认的超级管理员密码。
Vmware+爱快软路由单机校园网多拨实现带宽叠加[测试用]（非普遍性）
魔百和破解教程
 用SSH工具XShell连接谷歌云 root用户或普通用户
 MySQL优化技巧【持续更新】
Navicat常用快捷键
 IDEA实用插件Lombok
Redis数据类型及命令
 Java代码优化总结（持续更新）
Spring---AOP注解开发&jdbc模板&Spring事务管理

原文地址：https://www.cnblogs.com/-qiang/p/6525360.html