用jc制作简单购物车

「已注销」

于 2022-03-14 17:50:54 发布

阅读量113

点赞数 1

文章标签： javascript elementui webview

本文链接：https://blog.youkuaiyun.com/qq_64164870/article/details/123484427

版权

如何制作简单的购物车

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

				width: 100px;
				height: 50px;
				text-align: center;
			}

			tr {}
		</style>
	</head>
	<body>
		<table id="table">
			<tr bgcolor="lemonchiffon">
				<td>全选<input type="checkbox" onclick="selectAll(this.checked)"></td>
				<td>商品名称</td>
				<td>商品价格</td>
				<td>商品个数</td>
				<td>商品总价</td>
				<td>操作</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td><span>葡萄</span></td>
				<td class="price" onblur="calcRow('',this.parentElement)">49.9</td>
				<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
				<td class="sum">49.9</td>
				<td>
					<button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
					<button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td><span>西瓜</span></td>
				<td class="price" onblur="calcRow('',this.parentElement)">59.9</td>
				<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
				<td class="sum">59.9</td>
				<td>
					<button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
					<button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td><span>苹果</span></td>
				<td class="price" onblur="calcRow('',this.parentElement)">39.9</td>
				<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">1</td>
				<td class="sum">39.9</td>
				<td>
					<button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
					<button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
				</td>
			</tr>
			<tr>
				<td colspan="5">
					<h1>总价: $<font color="green" id="allPrice">0.0</font>
					</h1>
				</td>
				<td>
					<button onclick="delRow(this)">删除</button>
				</td>
			</tr>
		</table>
		<script>
			function calcAll() {
				//获得页面中所有的行
				var rs = document.getElementsByTagName("tr")
				
				var sum = 0;
				
				for (let i = 1; i < rs.length; i++) {
					//rs[i]就是除了第一行之外的其他的行
					var s1 = rs[i].getElementsByClassName("sum")[0].textContent
					sum +=s1*1
					allPrice.textContent = sum.toFixed(2)
				}
				//给页面赋值,只要小书店后两位
				
			}

			function delRow(btn) {
				var count = tr.getElementsByClassName("count")[0].textContent
				var rs = document.getElementsByTagName("tr")
				//将集合collection变成数组array
				rs = Array.from(rs)
				for (let i = 1; i < rs.length; i++) {
					//拿到行中对应的多选框
					var ck = rs[i].querySelectorAll("input[type='checkbox']")[0]
					//判断多选框是否被选中
					if (ck.checked) {
						//删除该行
						rs[i].outerHTML = ""
				
					}
					
				calcAll()
			}

			function calcRow(rex, tr) {

				var td = tr.getElementsByClassName("count")[0]
				if (rex == "+") {
					td.textContent = td.textContent * 1 + 1
				}
				if (rex == "-") {
					td.textContent = td.textContent * 1 - 1
				}
				calc(tr)

			}

			function calc(tr) {
			
				var price = tr.getElementsByClassName("price")[0].textContent
				var count = tr.getElementsByClassName("count")[0].textContent
				if (isNaN(price * 1)) {
					tr.getElementsByClassName("price")[0].textContent = 0
					price = 0
				}
				if (isNaN(count * 1)) {
					tr.getElementsByClassName("count")[0].textContent = 0
					count = 0
				}
				if(count<0){
					tr.getElementsByClassName("count")[0].textContent = 0
					count = 0
					
				}

				//使用单价*数量算出总价 并赋值给对应元素
				tr.getElementsByClassName("sum")[0].textContent = (price * count).toFixed(2)
				calcAll()
			}

			window.onload = () => {
				var rs = document.getElementsByTagName("tr")
				for (let i = 1; i < rs.length; i++) {
					calc(rs[i])
				}
			}

			function selectAll(status) {
				var is = document.querySelectorAll("input[type='checkbox']")
				for (let i of is) {
					i.checked = status
				}
			}
		</script>

	</body>
</html>