Web开发基础-JavaScript-22

JS中DOM对象使用的练习
案例思路：
案例演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车案例</title>
		<style type="text/css">
			h1 {
				text-align:center;
			}
			
			table {
				margin:0 auto;
				width:60%;
				border:2px solid #aaa;
				border-collapse:collapse;
			}
			
			table th,table td {
				border:2px solid #aaa;
				padding:5px;
			}
			
			th {
				background-color:#eee;
			}
			

		</style>
		<script type="text/javascript">
			//加入购物车
			//调用此函数时传入了this(按钮对象)
			//1.arguments[0] ->this
			//2.声明参数来接收this的值
			//注意：参数名不能使用关键字this
			function add_shopping(btn){
				console.log(btn);
				//btn->td->tr
				//利用父子关系导航到tr节点
				var tr = btn.parentNode.parentNode;
				console.log(tr);
				var tds = tr.children;
				console.log(tds);
				//找到tr节点的全部td子元素
				var tds = tr.getElementsByTagName("td");
				console.log(tds);
				var name = tds[0].innerHTML;
				console.log(name);
				var price = tds[1].innerHTML;
				console.log(price);
				//为购物车创建新的商品行
				var newTr =document.createElement("tr");
				newTr.innerHTML = '<td>'+name+'</td>'+
					'<td>'+price+'</td>'+
					    '<td align="center">'+
					    	'<input type="button" value="-" onclick="dec(this);"> '+
					    	'<input type="text" size="3" readonly value="1"> '+
					    	'<input type="button" value="+" onclick="inc(this);">'+
					     '</td>'+
					 '<td>'+80+'</td>'+
					 '<td align="center"><input type="button"  value="X" onclick="del(this);"></td>';
				console.log(newTr);
				//找到tbody节点
				var tbody = document.getElementById("goods");
				//追加tr元素
				tbody.appendChild(newTr);
				//计算并且更新 购物车全部商品的金额和总计
				sum();	  
			}
			
	   /*
		*声明一个计算总计的算法
		*/
		function sum(){
			   //计算每件商品的金额，更新金额列
			   var tbody = document.getElementById("goods");
			   var trs = 
	    			tbody.getElementsByTagName("tr");
			   var sum = 0;
			   
			   for(var i=0;i<trs.length;i++){
				   var tr = trs[i];
				   var tds = tr.getElementsByTagName("td");
				   var price = parseFloat(tds[1].innerHTML);
				   var qty = parseFloat(tds[2].getElementsByTagName("input")[1].value);
				   var n = price*qty;
				   sum += n;
				   tds[3].innerHTML = n;
			   }
			   
			   //合计全部金额，更新总计列
			   var td = document.getElementById("total");
			   td.innerHTML = sum;
		   }

		   
	   	  /*
		   *删除商品
		   */
		   function del(btn){
			   //找到 tr
			   var tr = btn.parentNode.parentNode;
			   var tbody = tr.parentNode;
			   //移除商品行记录
			   tbody.removeChild(tr);
			   sum();
		   }
		   
		   /*
		   	*增加1的功能
		    */
		   function inc(btn){
			  //找到 td
			  var td = btn.parentNode;
			  //找到全部的输入框
			  var inputs = td.getElementsByTagName("input");
			  //获取数量
			  var qty = parseInt(inputs[1].value);
			  //增加1
			  qty++;
			  //更新数量
			  inputs[1].value = qty;
			  //重写计算合计
			  sum();
		   }
		
		   /*
		   	*减少1的功能
		    */
		   function dec(btn){
			   //找到 td
			   var td = btn.parentNode;
			   //找到全部的输入框
			   var inputs = td.getElementsByTagName("input");
			   //获取数量
			   var qty = parseInt(inputs[1].value);
			   //减少1
			   qty--;
			   if(qty <= 0){
				   return;
			   }
			   //更新数量
			   inputs[1].value = qty;
			   //重新计算合计
			   sum();
		   }
		</script>
	</head>
	<body>
		<h1>好划算</h1>
		<table>
			<tr>
				<th>商品</th>
				<th>单价(元)</th>
				<th>颜色</th>
				<th>库存</th>
				<th>好评率</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>罗技M185鼠标</td>
				<td>80</td>
				<td>黑色</td>
				<td>893</td>
				<td>98%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
				</td>
			</tr>
			<tr>
				<td>微软X470键盘</td>
				<td>150</td>
				<td>黑色</td>
				<td>9028</td>
				<td>95%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shopping(this);"/>
				</td> 
			</tr>
			<tr>
				<td>洛克iPhone8手机壳</td>
				<td>150</td>
				<td>黑色</td>
				<td>672</td>
				<td>99%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shopping(this);"/>
				</td>
			</tr>
			<tr>
				<td>蓝牙耳机</td>
				<td>100</td>
				<td>蓝色</td>
				<td>8937</td>
				<td>95%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shopping(this);"/>
				</td>
			</tr>
			<tr>
				<td>金士顿U盘</td>
				<td>70</td>
				<td>红色</td>
				<td>482</td>
				<td>100%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shopping(this);"/>
				</td>
			</tr>
		</table>
		
		<!-- 购物车部分 -->
		<h1>购物车</h1>
		<table>
			<!-- 标题 -->
			<thead>
				<tr>
					<th>商品</th>
					<th>单价(元)</th>
					<th>数量</th>
					<th>金额(元)</th>
					<th>删除</th>
				</tr>
			</thead>
			<!-- 内容区 -->
			<tbody id="goods">
				<tr>
					<td>罗技185鼠标</td>
					<td>80</td>
					<td align="center">
						<input type="button" value="-" onclick="dec(this);"/>
						<input type="text" size="3" readonly value="1"/>
						<input type="button" value="+" onclick="inc(this);"/>		
					</td>
					<td>80</td>
					<td align="center">
						<input type="button" value="x" onclick="del(this);"/>	
					</td>
				</tr>
				<!-- 插入新的tr元素 -->
			</tbody>
			
			<!-- 汇总区 -->
			<tfoot>
				<tr>
					<td colspan="3" align="right">总计</td>
					<td id="total"></td>
					<td></td>
				</tr>
			
			</tfoot>
		
		</table>
	
	</body>

</html>
最终页面显示效果：
A.添加商品到购物车
B.增加商品数量
C.减少商品数量
D.删除商品
Web开发基础-JavaScript-22

猜你喜欢
