添加删除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>

查看全文

相关阅读:
LeetCode 230. 二叉搜索树中第K小的元素（Kth Smallest Element in a BST）
LeetCode 216. 组合总和 III（Combination Sum III）
LeetCode 179. 最大数（Largest Number）
LeetCode 199. 二叉树的右视图（Binary Tree Right Side View）
LeetCode 114. 二叉树展开为链表（Flatten Binary Tree to Linked List）
LeetCode 106. 从中序与后序遍历序列构造二叉树（Construct Binary Tree from Inorder and Postorder Traversal）
指针变量、普通变量、内存和地址的全面对比
 MiZ702学习笔记8——让MiZ702变身PC的方法
 你可能不知道的，定义，声明，初始化
 原创zynq文章整理（MiZ702教程+例程）

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