购物车的详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>23购物车删除单行</title>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
color: #666;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
}
body {
color: #666;
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
*html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
*+html .clearfix {
min-height: 1%;
}
.fl {
float: left;
}
.fr {
float: right;
}
/*素材家园 - www.sucaijiayuan.com*/
.catbox {
width: 940px;
margin: 100px auto;
}
.catbox table {
text-align: center;
width: 100%;
}
.catbox table th,
.catbox table td {
border: 1px solid #cadeff;
}
.catbox table th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
.catbox table td {
padding: 10px;
color: #444;
}
.catbox table tbody tr:hover {
background: RGB(238, 246, 255);
}
.checkbox {
width: 60px;
}
.check-all {
vertical-align: middle;
}
.goods {
width: 300px;
}
.goods span {
width: 180px;
margin-top: 20px;
text-align: left;
float: left;
}
.goods img {
width: 100px;
height: 80px;
margin-right: 10px;
float: left;
}
.price {
width: 130px;
}
.count {
width: 90px;
}
.count .add,
.count input,
.count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add,
.count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
}
.count .add:hover,
.count .reduce:hover {
color: #f50;
z-index: 3;
border-color: #f60;
cursor: pointer;
}
.count input {
width: 50px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
z-index: 2;
}
.subtotal {
width: 150px;
color: red;
font-weight: bold;
}
.operation span:hover,
a:hover {
cursor: pointer;
color: red;
text-decoration: underline;
}
.foot {
margin-top: 0px;
color: #666;
height: 48px;
border: 1px solid #c8c8c8;
border-top: 0;
background-color: #eaeaea;
background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
position: relative;
z-index: 8;
}
.foot div,
.foot a {
line-height: 48px;
height: 48px;
}
.foot .select-all {
width: 80px;
height: 48px;
line-height: 48px;
color: #666;
text-align: center;
}
.foot .delete {
padding-left: 10px;
}
.foot .closing {
border-left: 1px solid #c8c8c8;
width: 103px;
text-align: center;
color: #666;
font-weight: bold;
cursor: pointer;
background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
}
.foot .closing:hover {
background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241));
color: #333;
}
.foot .total {
margin: 0 20px;
cursor: pointer;
}
.foot #priceTotal,
.foot #selectedTotal {
color: red;
font-family: "Microsoft Yahei";
font-weight: bold;
}
.foot .selected {
cursor: pointer;
}
.foot .selected .arrow {
position: relative;
top: -3px;
margin-left: 3px;
}
.foot .selected .down {
position: relative;
top: 3px;
display: none;
}
.show .selected .down {
display: inline;
}
.show .selected .up {
display: none;
}
.foot .selected:hover .arrow {
color: red;
}
.foot .selected-view {
width: 938px;
border: 1px solid #c8c8c8;
position: absolute;
height: auto;
background: #ffffff;
z-index: 9;
bottom: 48px;
left: -1px;
display: none;
}
.show .selected-view {
display: block;
}
.foot .selected-view div {
height: auto;
}
.foot .selected-view .arrow {
font-size: 16px;
line-height: 100%;
color: #c8c8c8;
position: absolute;
right: 330px;
bottom: -9px;
}
.foot .selected-view .arrow span {
color: #ffffff;
position: absolute;
left: 0px;
bottom: 1px;
}
#selectedViewList {
padding: 10px 20px 10px 20px;
}
#selectedViewList div {
/* display: inline-block; */
position: relative;
width: 100px;
height: 80px;
border: 1px solid #ccc;
margin: 10px;
float: left;
}
#selectedViewList div img {
width: 100px;
height: 80px;
margin-right: 10px;
float: left;
}
#selectedViewList div span {
display: none;
color: #ffffff;
font-size: 12px;
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 18px;
line-height: 18px;
text-align: center;
background: #000;
cursor: pointer;
}
#selectedViewList div:hover span {
display: block;
}
</style>
</head>
<body>
<div class="catbox">
<table id="cartTable">
<thead>
<tr>
<th><label>
<input class="check-all check" type="checkbox" /> 全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Casio/卡西欧 EX-TR350</span>
</td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">5999.88</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Canon/佳能 PowerShot SX50 HS</span>
</td>
<td class="price">3888.50</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">3888.50</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Sony/索尼 DSC-WX300</span>
</td>
<td class="price">1428.50</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">1428.50</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Fujifilm/富士 instax mini 25</span>
</td>
<td class="price">640.60</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">640.60</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<a class="fl delete" id="deleteAll">删除</a>
<div class="fr closing">结 算</div>
<input type="hidden" id="cartTotalPrice" />
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件</div>
</div>
</div>
<script>
// 删除的时候，会导致单选的数量产生变化
var oBox = document.querySelector('.catbox');
var checkOnes = document.querySelectorAll('.check-one');
console.log(checkOnes)
var chAll = document.querySelector('.check-all');
oBox.addEventListener('click', function (e) {
var e = event || e;
var target = e.target || e.srcElement;
// 全选
if (target.className === 'check-all check') {
checkOnes.forEach(function (val, i) {
val.checked = target.checked
})
}
// 反选
if (target.className === 'check-one check') {
// checkOnes.forEach(function(val,i){
// if(!val.checked){
// break ;
// err forEach 不能提前结束
// break 只能在for里面使用
// }
// })
for (var i = 0; i < checkOnes.length; i++) {
if (!checkOnes[i].checked) {
break
}
}
chAll.checked = i == checkOnes.length;
}
// 单删
if (target.className === 'delete') {
target.parentNode.parentNode.remove() ;
checkOnes = document.querySelectorAll('.check-one') ;
for (var i = 0; i < checkOnes.length; i++) {
if (!checkOnes[i].checked) {
break
}
}
chAll.checked = i == checkOnes.length;
}
// 批量删除
// 判断单选是否选中
if (target.id === 'deleteAll') {
checkOnes.forEach(function (val, i) {
if (val.checked) {
val.parentNode.parentNode.remove() ;
checkOnes = document.querySelectorAll('.check-one')
}
})
}
// 数量+
if (target.className === 'add') {
target.previousElementSibling.value++;
// 小计
target.parentNode.nextElementSibling.innerHTML = target.parentNode.previousElementSibling.innerHTML * target.previousElementSibling.value;
if (target.previousElementSibling.value > 1) {
target.previousElementSibling.previousElementSibling.innerHTML = '-'
}
}
// 数量-
if (target.className === 'reduce') {
if (target.innerHTML) {
target.nextElementSibling.value--;
target.parentNode.nextElementSibling.innerHTML = target.parentNode.previousElementSibling.innerHTML * target.nextElementSibling.value;
if (target.nextElementSibling.value <= 1) {
target.innerHTML = ''
}
}
}
// 统计
total()
})
function total() {
var count = 0 ;
var money = 0 ;
checkOnes.forEach(function (val, i,arr) {
if (val.checked) {
count += val.parentNode.parentNode.querySelector('.count-input').value * 1 ;
money += val.parentNode.parentNode.querySelector('.subtotal').innerHTML * 1 ;
}
})
selectedTotal.innerHTML = count;
priceTotal.innerHTML = money.toFixed(2)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>23购物车删除单行</title>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
color: #666;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
}
body {
color: #666;
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
*html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
*+html .clearfix {
min-height: 1%;
}
.fl {
float: left;
}
.fr {
float: right;
}
/*素材家园 - www.sucaijiayuan.com*/
.catbox {
width: 940px;
margin: 100px auto;
}
.catbox table {
text-align: center;
width: 100%;
}
.catbox table th,
.catbox table td {
border: 1px solid #cadeff;
}
.catbox table th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
.catbox table td {
padding: 10px;
color: #444;
}
.catbox table tbody tr:hover {
background: RGB(238, 246, 255);
}
.checkbox {
width: 60px;
}
.check-all {
vertical-align: middle;
}
.goods {
width: 300px;
}
.goods span {
width: 180px;
margin-top: 20px;
text-align: left;
float: left;
}
.goods img {
width: 100px;
height: 80px;
margin-right: 10px;
float: left;
}
.price {
width: 130px;
}
.count {
width: 90px;
}
.count .add,
.count input,
.count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add,
.count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
}
.count .add:hover,
.count .reduce:hover {
color: #f50;
z-index: 3;
border-color: #f60;
cursor: pointer;
}
.count input {
width: 50px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
z-index: 2;
}
.subtotal {
width: 150px;
color: red;
font-weight: bold;
}
.operation span:hover,
a:hover {
cursor: pointer;
color: red;
text-decoration: underline;
}
.foot {
margin-top: 0px;
color: #666;
height: 48px;
border: 1px solid #c8c8c8;
border-top: 0;
background-color: #eaeaea;
background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
position: relative;
z-index: 8;
}
.foot div,
.foot a {
line-height: 48px;
height: 48px;
}
.foot .select-all {
width: 80px;
height: 48px;
line-height: 48px;
color: #666;
text-align: center;
}
.foot .delete {
padding-left: 10px;
}
.foot .closing {
border-left: 1px solid #c8c8c8;
width: 103px;
text-align: center;
color: #666;
font-weight: bold;
cursor: pointer;
background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
}
.foot .closing:hover {
background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241));
color: #333;
}
.foot .total {
margin: 0 20px;
cursor: pointer;
}
.foot #priceTotal,
.foot #selectedTotal {
color: red;
font-family: "Microsoft Yahei";
font-weight: bold;
}
.foot .selected {
cursor: pointer;
}
.foot .selected .arrow {
position: relative;
top: -3px;
margin-left: 3px;
}
.foot .selected .down {
position: relative;
top: 3px;
display: none;
}
.show .selected .down {
display: inline;
}
.show .selected .up {
display: none;
}
.foot .selected:hover .arrow {
color: red;
}
.foot .selected-view {
width: 938px;
border: 1px solid #c8c8c8;
position: absolute;
height: auto;
background: #ffffff;
z-index: 9;
bottom: 48px;
left: -1px;
display: none;
}
.show .selected-view {
display: block;
}
.foot .selected-view div {
height: auto;
}
.foot .selected-view .arrow {
font-size: 16px;
line-height: 100%;
color: #c8c8c8;
position: absolute;
right: 330px;
bottom: -9px;
}
.foot .selected-view .arrow span {
color: #ffffff;
position: absolute;
left: 0px;
bottom: 1px;
}
#selectedViewList {
padding: 10px 20px 10px 20px;
}
#selectedViewList div {
/* display: inline-block; */
position: relative;
width: 100px;
height: 80px;
border: 1px solid #ccc;
margin: 10px;
float: left;
}
#selectedViewList div img {
width: 100px;
height: 80px;
margin-right: 10px;
float: left;
}
#selectedViewList div span {
display: none;
color: #ffffff;
font-size: 12px;
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 18px;
line-height: 18px;
text-align: center;
background: #000;
cursor: pointer;
}
#selectedViewList div:hover span {
display: block;
}
</style>
</head>
<body>
<div class="catbox">
<table id="cartTable">
<thead>
<tr>
<th><label>
<input class="check-all check" type="checkbox" /> 全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Casio/卡西欧 EX-TR350</span>
</td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">5999.88</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Canon/佳能 PowerShot SX50 HS</span>
</td>
<td class="price">3888.50</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">3888.50</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Sony/索尼 DSC-WX300</span>
</td>
<td class="price">1428.50</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">1428.50</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<span>Fujifilm/富士 instax mini 25</span>
</td>
<td class="price">640.60</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">640.60</td>
<td class="operation">
<span class="delete">删除</span>
</td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<a class="fl delete" id="deleteAll">删除</a>
<div class="fr closing">结 算</div>
<input type="hidden" id="cartTotalPrice" />
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件</div>
</div>
</div>
<script>
// 删除的时候，会导致单选的数量产生变化
var oBox = document.querySelector('.catbox');
var checkOnes = document.querySelectorAll('.check-one');
console.log(checkOnes)
var chAll = document.querySelector('.check-all');
oBox.addEventListener('click', function (e) {
var e = event || e;
var target = e.target || e.srcElement;
// 全选
if (target.className === 'check-all check') {
checkOnes.forEach(function (val, i) {
val.checked = target.checked
})
}
// 反选
if (target.className === 'check-one check') {
// checkOnes.forEach(function(val,i){
// if(!val.checked){
// break ;
// err forEach 不能提前结束
// break 只能在for里面使用
// }
// })
for (var i = 0; i < checkOnes.length; i++) {
if (!checkOnes[i].checked) {
break
}
}
chAll.checked = i == checkOnes.length;
}
// 单删
if (target.className === 'delete') {
target.parentNode.parentNode.remove() ;
checkOnes = document.querySelectorAll('.check-one') ;
for (var i = 0; i < checkOnes.length; i++) {
if (!checkOnes[i].checked) {
break
}
}
chAll.checked = i == checkOnes.length;
}
// 批量删除
// 判断单选是否选中
if (target.id === 'deleteAll') {
checkOnes.forEach(function (val, i) {
if (val.checked) {
val.parentNode.parentNode.remove() ;
checkOnes = document.querySelectorAll('.check-one')
}
})
}
// 数量+
if (target.className === 'add') {
target.previousElementSibling.value++;
// 小计
target.parentNode.nextElementSibling.innerHTML = target.parentNode.previousElementSibling.innerHTML * target.previousElementSibling.value;
if (target.previousElementSibling.value > 1) {
target.previousElementSibling.previousElementSibling.innerHTML = '-'
}
}
// 数量-
if (target.className === 'reduce') {
if (target.innerHTML) {
target.nextElementSibling.value--;
//操作dom树的内容比较绕,需要仔细地理解
target.parentNode.nextElementSibling.innerHTML = target.parentNode.previousElementSibling.innerHTML * target.nextElementSibling.value;
if (target.nextElementSibling.value <= 1) {
target.innerHTML = ''
}
}
}
// 统计
total()
})
//函数的功能是计算数量和价钱的综合
function total() {
var count = 0 ;
var money = 0 ;
checkOnes.forEach(function (val, i,arr) {
if (val.checked) {
count += val.parentNode.parentNode.querySelector('.count-input').value * 1 ;
money += val.parentNode.parentNode.querySelector('.subtotal').innerHTML * 1 ;
}
})
selectedTotal.innerHTML = count;
priceTotal.innerHTML = money.toFixed(2)
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通