Js简单购物车的实现

最新推荐文章于 2024-05-28 18:30:26 发布

倾心*

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量385

点赞数

本文链接：https://blog.csdn.net/weixin_53056046/article/details/123067356

版权

javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			tbody {
				text-align: center;
			}

			input {
				text-align: center;
			}

			span {
				text-align: center;
			}
		</style>
	</head>
	<body>
		商品名称：<input type="text" name="" id="goodsName" />
		商品价格：<input type="text" name="" id="goodsPrice" value="" />
		商品数量：<input type="number" name="" id="goodsNum" value="" />
		<br><br>
		<button type="button" onclick="add()">新增</button>
		<button type="button" onclick="delcheck()">删除选中行</button><br><br>
		<table border="1px" cellspacing="0px" cellpadding="0px" width="800px">
			<thead>
				<th>全选<input type="checkbox" name="" id="" value="" onclick="checkAll(this)" /></th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>商品数量</th>
				<th>商品总价</th>
				<th>操作</th>
			</thead>
			<tbody id="shoptbody">

			</tbody>
		</table>
		总价：<span id="total">

		</span>
		<script type="text/javascript">
			//附加条件新增
			function add() {
				/* 首先 判断购物车中的商品是否为空 如果为空 就直接addGoods(),否则判断 
								tbody有没有子节点*/
				if (shoptbody.children.length == 0) {
					addGoods();
				} else {
					var goodsArr = document.getElementsByClassName("className");
					for (var i = 0; i < goodsArr.length; i++) {
						//创建第三方变量status 假设没有相同的商品
						var status = false;
						if (goodsName.value == goodsArr[i].innerText) {
							status = true; //如果有相同的商品退出循环
							break;
						}
					}
					if (status == true) {
						goodsArr[i].nextElementSibling.innerText = goodsPrice.value;

						var tdArr = goodsArr[i].parentNode.children;

						tdArr[4].innerText = tdArr[2].innerText * (++tdArr[3].children[1].value);
					} else {
						addGoods();
					}
				}
			}

			//新增 （普通添加  没有任何的附加条件）
			function addGoods() {
				var Tr = document.createElement("tr");
				var str = "<td><input type='checkbox' class='sel' onclick='totalPrice()'/></td>";
				str += "<td class='className'>" + goodsName.value + "</td>";
				str += "<td>" + goodsPrice.value + "</td>";
				str += "<td><button onclick='designsum(this)'>+</button><input type='text' value='" + goodsNum.value +
					"'/><button onclick='designdecr(this)'>-</button></td>";
				str += "<td>" + goodsPrice.value * goodsNum.value + "</td>";
				str += "<td><button onclick='delTr(this)'>删除</button></td>";
				Tr.innerHTML = str;
				shoptbody.appendChild(Tr);
			}
			//删除
			function delTr(a) {
				a.parentNode.parentNode.remove();
				totalPrice();

			}
			//删除选中行
			function delcheck() {
				var checkArr = document.querySelectorAll(".sel");
				for (var i = 0; i < checkArr.length; i++) {
					if (checkArr[i].checked == true) {
						checkArr[i].parentNode.parentNode.remove();
					}
					totalPrice();
				}
			}
			
			//加号按钮
			function designsum(b) {

				b.parentNode.nextElementSibling.innerText =
					b.parentNode.previousElementSibling.innerText * (++b.nextElementSibling.value);
				totalPrice();

			}
			
			//减号按钮
			function designdecr(b) {
				if (b.previousElementSibling.value == 1) {
					alert("不能再减了");
				}
				b.parentNode.nextElementSibling.innerText =
					b.parentNode.previousElementSibling.innerText * (--b.previousElementSibling.value);
				totalPrice();
			}

			//全选和全不选
			//当我点击最上方的复选框按钮	让下方的复选框全部选中
			function checkAll(b) {
				var checkAllArr = document.getElementsByClassName("sel");
				for (var i = 0; i < checkAllArr.length; i++) {
					checkAllArr[i].checked = b.checked;
				}
				totalPrice();
			}
			
			//总价格
			function totalPrice() {
				var goodsSum = document.getElementsByClassName("sel");
				var sum = 0;
				for (var i = 0; i < goodsSum.length; i++) {
					if (goodsSum[i].checked == true) {
						sum += Number(goodsSum[i].parentNode.parentNode.children[4].innerText);
					}
				}
				//将总价赋值给span
				total.innerHTML = sum+"元";

			}
		</script>
	</body>
</html>

倾心*

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js简单购物车的实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> tbody { text-align: center; } input { text-align: center; } span { text-align: c...
复制链接

扫一扫