dom版购物车

dom版购物车的实现

html:

<table border="1" cellspacing="0" id="table">
			<thead>
				<tr>
					<th>商品名称</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
				</tr>
			</thead>
			<tbody>
					<tr>
						<td>黄鹤楼</td>
						<td>¥18.00</td>
						<td><button>-</button><span>1</span><button>+</button></td>
						<td>¥18.00</td>
					</tr>
					<tr>
						<td>芙蓉王</td>
						<td>¥24.00</td>
						<td><button>-</button><span>1</span><button>+</button></td>
						<td>¥24.00</td>
					</tr>
					<tr>
						<td>大中华</td>
						<td>¥50.00</td>
						<td><button>-</button><span>1</span><button>+</button></td>
						<td>¥50.00</td>
					</tr>
					<tr>
						<td>红双喜</td>
						<td>¥12.00</td>
						<td><button>-</button><span>1</span><button>+</button></td>
						<td>¥12.00</td>
					</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3">Total:</td>
					<td>¥104.00</td>
				</tr>
			</tfoot>
		</table>

css:

       <style>
			table{
			width: 350px;
			margin: 50px auto;
			text-align: center;
			}
			table button{
				cursor: pointer;
			}
		</style>

javascript:

<script type="text/javascript">
			//获取触发事件的元素
			var tables=document.getElementById('table');
			var btns=tables.querySelectorAll('tbody>tr>td>button');
			for(var btn of btns){
				btn.onclick=function(){
					// 获取页面的数量
					var spans=this.parentElement.children[1];
					var res=parseInt(spans.innerHTML);
					// 获取单价
					var price=parseInt(this.parentElement.previousElementSibling.innerHTML.slice(1));
					//获取小计的元素
					var sum=this.parentElement.nextElementSibling;
					if(this.innerHTML=='-'){
						if(res>0){
							res--;
						}
					}else if(this.innerHTML=='+'){
							res++;
						}
						spans.innerHTML=res;
						sum.innerHTML=`¥${(price*res).toFixed(2)}`;
					//计算总Total
					 var lastSum=table.querySelectorAll('tbody tr>td:last-child');
					 var Total=0;
					 for(var lsem of lastSum){
						 Total+=parseInt(lsem.innerHTML.slice(1));
					 }
		       tables.querySelector('tfoot tr>td:last-child').innerHTML=`¥${Total.toFixed(2)}`;
					
				}
			}
		</script>

购物车的功能应用的还是比较广泛的，js中this的用法也是非常灵活的，本例中的this指向触发事件的button,通过这个例子小小练习下,共勉！