其他分享
首页 > 其他分享> > 5.4.2 js实现的购物车 有添加商品 删除商品 计算价格 调整数量等

5.4.2 js实现的购物车 有添加商品 删除商品 计算价格 调整数量等

作者:互联网

效果图:在这里插入图片描述
html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<fieldset id="">
			<legend>购物车</legend>
			商品名称:<input type="text" name="" id="goodsName" value="" />
			商品价格:<input type="text" name="" id="goodsPrice" value="" />
			商品数量:<input type="text" name="" id="goodsNum" value="" /><br>
			<input type="button" name="" id="" value="添加" onclick="addgoods()" />
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>选择<input type="checkbox" name="" id="allCheck" value="" onclick="allCheckbtn()" /></th>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>商品数量</th>
					<th>商品总价</th>
					<th>操作</th>
				</tr>
				<tbody id="goodsList">

				</tbody>
			</table>
			<input type="button" name="" id="" value="删除选中" onclick="delAll()" />
			<span id="totalprice">
			</span>
		</fieldset>


		<script type="text/javascript">
			function add() {
				let str = "";
				str += "<td><input type='checkbox'  class='checkTd' οnclick='checkone()'></td>";
				str += "<td class='goodsNameTr'>" + goodsName.value + "</td><td>" + goodsPrice.value + "</td>"
				str += "<td><input type='button' value='+' οnclick='addbtn(this)'><input type='number' value='" + goodsNum
					.value + "'><input type='button' value='-' οnclick='lowerbtn(this)'></td>"
				str += "<td>" + Number(goodsPrice.value) * +Number(goodsNum.value) + "</td>"
				str += "<td><input type='button' value='删除' οnclick='delbtn(this)'></td>";
				let trNew = document.createElement("tr");
				trNew.innerHTML += str;
				goodsList.appendChild(trNew);
				totalpricebtn();
			}
			//判断添加
			function addgoods() {
				let goodsNameTrs = document.getElementsByClassName("goodsNameTr");
				if (goodsNameTrs.length == 0) {
					add();
				} else {
					let status = false;
					for (var i = 0; i < goodsNameTrs.length; i++) {
						if (goodsNameTrs[i].innerText == goodsName.value) {
							status = true;
							goodsNameTrs[i].parentNode.children[3].children[1].value = Number(goodsNameTrs[i].parentNode
								.children[3].children[1].value) + Number(goodsNum.value);
							goodsNameTrs[i].parentNode.children[4].innerHTML = goodsNameTrs[i].parentNode.children[2].innerText *
								goodsNameTrs[i].parentNode.children[3].children[1].value
						}
					}
					if (!status) {
						add();
					}

				}
				
			}
			//添加数量
			function addbtn(obj) {
				obj.nextElementSibling.value++;
				obj.parentNode.nextElementSibling.innerText = obj.parentNode.previousElementSibling.innerText * obj
					.nextElementSibling.value;
					totalpricebtn();
			}
			//减少数量
			function lowerbtn(obj) {
				obj.previousElementSibling.value--;
				obj.parentNode.nextElementSibling.innerText = obj.parentNode.previousElementSibling.innerText * obj
					.previousElementSibling.value;
					totalpricebtn();
			}
			//删除
			function delbtn(obj) {
				obj.parentNode.parentNode.remove();
				totalpricebtn();
			}
			//全选择
			function allCheckbtn() {
				let checkTds = document.getElementsByClassName("checkTd");
				let status = allCheck.checked;

				for (var i = 0; i < checkTds.length; i++) {
					if (allCheck.checked) {
						checkTds[i].checked = status;
					} else {
						checkTds[i].checked = status;
					}
				}
				totalpricebtn();
			}
			//反选
			function checkone() {
				let checkTds = document.getElementsByClassName("checkTd");
				let status = true;
				for (var i = 0; i < checkTds.length; i++) {
					if(!checkTds[i].checked){
						status = false;
						break;
					}
				}
				if(status){
					allCheck.checked = true;
				}else{
					allCheck.checked = false;
				}
				totalpricebtn();
			}
			//删除选中
			function delAll(){
				let checkTds = document.getElementsByClassName("checkTd");
				for (var i = checkTds.length-1; i >= 0; i--) {
					if(checkTds[i].checked){
						checkTds[i].parentNode.parentNode.remove();
					}
				}
				totalpricebtn();
			}
			//总价
			function totalpricebtn(){
				let checkTds = document.getElementsByClassName("checkTd");
				let num = 0;
				for (var i = 0; i < checkTds.length; i++) {
					if(checkTds[i].checked){
					num += Number(checkTds[i].parentNode.parentNode.children[4].innerText);
					}
				}
				totalprice.innerText = "总价格"+num+"元";
			}
		</script>
	</body>
</html>

标签:5.4,checkTds,value,js,let,parentNode,checked,obj,购物车
来源: https://blog.csdn.net/wang121213145/article/details/122094575