HTML+CSS+JavaScript实现网络购物车

1 页面布局

购物车由一个table标签和一个div标签构成。案例在Chrome浏览器运行效果，如图所示。

table标签共有5行6列，第1行是表头，第2-5行的每一行都代表一个商品，依次用td标签存放商品的勾选框、商品缩略图及名称、商品单价、商品增减操作按钮以及小计、删除按钮等。div标签存放已选商品数量、合计金额和提交订单按钮。以只有1个商品为例，HTML示例代码如下所示。CSS代码详见本书源码。

1 			
2  
3     
4     
5     
6     
7     
8     
9  		
10	
11    
12    
13    
14    
19    
20    
21    
22 
全选
商品
单价
数量
小计
操作
数据结构-清华大学出版社
28

15       
16       
17       +
18    
28
删除
23 
		
24	 
提交订单
		
25	 
合计：￥0
26	 
	已选商品0件
27 

上述代码中，第1-22行代码定义了表格标签；第2-9行定义了表头，第1行的第1个单元格是全选框；第10-21行代码定义了第2行，共有5个单元格，依次存放商品的勾选框、商品缩略图及名称、商品单价、商品增减操作按钮以及小计、删除按钮等；第23-27行代码定义了div标签，依次存放已选商品数量、合计金额和提交订单按钮。 

2 工具函数

（1）用户单击任一行内的商品增减操作按钮，同一行的小计金额都会根据数量的变化而变化，因此应封装函数实现金额小计功能。示例代码如下。

function getSubtotal(tr) {
		var cells = tr.cells;
		var price = cells[2]; 
		var countInput = tr.getElementsByTagName('input')[1]; 
		var subtotal = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
		cells[4].innerHTML = subtotal;
		var span = tr.getElementsByTagName('span')[1];
		if (countInput.value == 1) {
			span.innerHTML = '';
		}else{
			span.innerHTML = '-';
		}
}

上述代码中定义了函数getSubtotal(tr)，它根据单价和数量计算金额小计，并显示在页面相应的单元格中。如果数量不为1，则将显示商品减少操作符“-”。形式参数tr代表进行小计的行对象。

（2）用户选中某个商品或全选商品时，已选商品数量和合计都会根据选中商品的变化而变化，因此应封装函数实现合计功能。示例代码如下。

function getTotal() {	
		var seleted = 0;
		var price = 0;		
		for (var i = 0, len = tr.length; i < len; i++) {
			if (tr[i].getElementsByTagName('input')[0].checked) { 
				seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
				price += parseFloat(tr[i].cells[4].innerHTML); 	
			}			
		}
		selectedTotal.innerHTML = seleted;
		priceTotal.innerHTML = price.toFixed(2); 	
}

上述代码定义了函数getTotal()，它遍历累加每行商品的数量和金额小计，计算出已选商品数量和合计金额，并显示在页面相应的位置。

3 勾选商品

用户单击某行的勾选框时，如果勾选框状态是未选中，则取消全选，然后调用

getTotal()函数计算并显示已选商品数量和合计金额；用户单击全选框时，所有行内勾选框状态和全选框状态保持一致，然后调用getTotal()函数计算并显示已选商品数量和合计金额。

示例代码如下。

1 for(var i = 0; i < checkInputs.length; i++ ){
2		checkInputs[i].onclick = function () { 
3			if (this.className.indexOf('check-all') >= 0) { 
4				for (var j = 0; j < checkInputs.length; j++) {
5					checkInputs[j].checked = this.checked;
6				}
7			}
8			if (!this.checked) { 				
9					checkAllInput.checked = false;			
10			}
11			getTotal();
12		}
13	}

上述代码中，第1-2行代码循环遍历所有的checkbox，为每一个checkbox绑定单击事件及其处理程序；第3-7行代码设置所有行内勾选框状态和全选框状态保持一致；第8-10行代码判断如果当前勾选框状态未选中，则取消全选；第11行代码调用getTotal()函数计算并显示已选商品数量和合计金额。

4 增减和删除商品

表格的每一行内有减少商品、增加商品和删除按钮等，可以通过事件委托，为它们的父元素tr对象绑定单击事件及其处理程序。单击某行内的商品增减操作按钮，同一行的小计金额都会根据数量的变化而变化；单击删除按钮将当前行删除。示例代码如下。

1 for (var i = 0; i < tr.length; i++) {
2	   tr[i].onclick = function (e) {		
3			var el = e.target
4			var cls = el.className; 
5			var countInput = this.getElementsByTagName('input')[1];
6			var value = parseInt(countInput.value); 
7			switch (cls) {
8				case 'add': 
9					countInput.value = value + 1;
10					getSubtotal(this);
11					break;
12				case 'reduce': 
13					if (value > 1) {
14						countInput.value = value - 1;
15						getSubtotal(this);
16					}
17					break;
18				case 'delete':
19					var conf = confirm('确定删除此商品吗？');
20					if (conf) {
21						this.parentNode.removeChild(this);
22					}
23					break;
24			}
25			getTotal();
26		}
27 }

上述代码中，第1-2行代码循环遍历所有的tr，为每一个tr绑定单击事件及其处理程序；第3-6行代码通过事件对象的target属性获取事件源，并获取事件源的class属性和当前行的已购商品数量；第7-24行代码通过switch语句判断，如果事件源是增加商品按钮，则将已购商品数量加1，并调用getSubtotal(this)进行小计；如果事件源是减少商品按钮，并且已购商品数量大于1，则将已购商品数量减1，并调用getSubtotal(this)进行小计；如果事件源是删除商品按钮，则询问用户是否将当前行从购物车删除；第25行代码调用getTotal()函数计算并显示已选商品数量和合计金额。

---

视频讲解：HTML+CSS+JavaScript实现网络购物车网页特效_哔哩哔哩_bilibili

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》