购物车

最新推荐文章于 2023-05-26 14:36:40 发布
Ms. Yao
最新推荐文章于 2023-05-26 14:36:40 发布
阅读量104
点赞数
本文链接：https://blog.csdn.net/qq_43665021/article/details/96114967
版权
代码如下：
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript">
			window.onload = function() {
				var gouxuan = document.getElementsByClassName('check'); //获取所有的勾选框
				var quanxuan = document.getElementsByClassName('check-all'); //获取全选框
				var table = document.getElementById('cartTable'); //获取表格
				var tr = table.children[1].rows; //获取表格中的tbody元素
				var shuru = document.getElementById('selectedTotal'); //获取数量容器
				var jiaru = document.getElementById('priceTotal'); //获取总价容器
				var shanchu = document.getElementById('deleteAll');//获取删除的选项
				for(var i = 0; i < gouxuan.length; i++) {
					gouxuan[i].onclick = function() {
						if(this.className.indexOf('check-all') >= 0) {
							for(var j = 0; j < gouxuan.length; j++) {
								gouxuan[j].checked = this.checked;
							}
						}
						if(!this.checked) {
							for(var k = 0; k < quanxuan.length; k++) {
								quanxuan[k].checked = false;
							}
						}
						zong();
					}
				}

				function zong() {
					var money = 0;
					var shu = 0;
					for(var i = 0; i < tr.length; i++) {
						if(tr[i].getElementsByTagName('input')[0].checked) {
							shu += parseInt(tr[i].getElementsByTagName('input')[1].value);
							money += parseFloat(tr[i].cells[4].innerHTML);
						}
					}
					alert(shu);
					shuru.innerHTML = shu;
					jiaru.innerHTML = money.toFixed(2);
				}
				for(var i = 0; i < tr.length; i++) {
					tr[i].onclick = function() {
						//alert();
						var evenEle = event;
						var ele = evenEle.target || evenEle.srcElement;
						var cls = ele.className;
						var shuliang = this.getElementsByTagName('input')[1];
						var shuSum = parseInt(shuliang.value);

						switch(cls) {
							case 'add':
								//alert();
								shuliang.value = shuSum + 1;
								xiaoji(this);
								break;
							case 'reduce':
								if(shuSum > 1) {
									shuliang.value = shuSum - 1;
								}
								xiaoji(this);
								break;
							case 'delete':
								var con = confirm('确认删除吗?');
								if(con) {
									this.parentNode.removeChild(this);
								}
								break;
						}
						zong();
					}

				}

				function xiaoji(tr) {
					var price = parseFloat(tr.cells[2].innerHTML);
					var danshu = parseInt(tr.getElementsByTagName('input')[1].value);
					tr.cells[4].innerHTML = (price * danshu).toFixed(2);
					if(danshu > 1) {
						tr.getElementsByTagName('span')[1].innerHTML = '-';
					} else {
						tr.getElementsByTagName('span')[1].innerHTML = '';
					}
				}
				shanchu.onclick = function() {
					//alert();
					if(shuru.innerHTML != 0) {
						var conf = confirm('是否删除选中的商品？');
						if(conf) {
							for(var i = 0; i < tr.length; i++) {
								if(tr[i].getElementsByTagName('input')[0].checked) {
									tr[i].parentNode.removeChild(tr[i]);
									i--;
								}
							}
						}
					} else {
						alert('请选择商品删除');
					}
					zong();
				}
			}
		</script>
	</head>

	<body>
		<div class="catbox">
			<table id="cartTable">
				<thead>
					<tr>
						<th><label>
            <input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</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"><img src="images/1.jpg" alt="" /><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"><img src="images/2.jpg" alt="" /><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"><img src="images/3.jpg" alt="" /><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"><img src="images/4.jpg" alt="" /><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">
				<label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
				<a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
				<div class="fr closing" onclick="getTotal();">结 算</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>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
				<div class="selected-view">
					<div id="selectedViewList" class="clearfix">
						<div><img src="images/1.jpg"><span>取消选择</span></div>
					</div>
					<span class="arrow">◆<span>◆</span></span>
				</div>
			</div>
		</div>

	</body>

</html>