4_6.DOM--实现客户端购物车计算

最新推荐文章于 2024-05-05 16:24:14 发布

ATWLee

最新推荐文章于 2024-05-05 16:24:14 发布

阅读量197

点赞数

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/101031027

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table{
			width: 30%;
			border-collapse: collapse;
			text-align: center;
		}
		th,td{
			border: 1px solid #000;			
		}
		td[colspan="3"]{
			text-align: right;
		}
		table tr td:last-child{
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<table id="table">
		<thead>
			<tr>
				<th>Name</th>
				<th>Price</th>
				<th>Number</th>
				<th>Subtotal</th>
			</tr>			
		</thead>
		<tbody>
			<tr>
				<td>A</td>
				<td>$1000.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>$1000.00</td>
			</tr>
			<tr>
				<td>B</td>
				<td>$2000.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>$2000.00</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">Total:</td>
				<td>$3000.00</td>
			</tr>		
		</tfoot>
	</table>

	<script src="./k.js"></script>
</body>
</html>



//JS


//1.构建DOMTree
//2.查找触发事件的元素
var buttons=document.querySelectorAll("#table button");
for(var i=0;i<buttons.length;i++){
		//3.绑定事件
		buttons[i].onclick=function(){
		//4.查找要修改的元素
		var num=this.parentNode.getElementsByTagName("span")[0];//当前this元素（button）的父元素的tagname为span的元素
		
		var count=parseInt(num.innerHTML);//数量number化
		var subtotal=this.parentNode.nextElementSibling;//查找小计元素
		var price=this.parentNode.previousElementSibling;//查找单价元素
		var price_num=parseFloat(price.innerHTML.slice(1));//单价元素number化，便于之后的数值运算
		var total=document.querySelector("#table tfoot tr td:last-child");

		if(this.innerHTML=="-"){//判断是加还是减
			if(count<1){return;}//如果数量小于0.则退出事件
			//5.修改
			count--;
		}else if(this.innerHTML=="+"){
			count++;
		}
		num.innerHTML=count;
		subtotal.innerHTML="$"+(count*price_num).toFixed(2);//计算小计

		//总计
		var subtotals=document.querySelectorAll("#table tbody tr td:last-child");
		var sum=0;
		for(var i=0;i<subtotals.length;i++){
			var subtotal_num=parseFloat(subtotals[i].innerHTML.slice(1));
			sum+=subtotal_num
		}
		total.innerHTML="$"+(sum.toFixed(2));
	}		
}

ATWLee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4_6.DOM--实现客户端购物车计算

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> table{ width: 30%; border-collapse: collapse; tex...
复制链接

扫一扫

专栏目录