js实现购物车_payprice[j].innerhtml-CSDN博客

本文链接：https://blog.csdn.net/Uking201410/article/details/51567210

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link rel="stylesheet" href="shoppingCar.css" type="text/css">

</head>

<body>
<div id="shopCar">
<table id="table">
   <thead>
     <th><input class="checkAll check" type="checkbox"/>全选</th>
     <th>商品</th>
     <th>单价</th>
     <th>数量</th>
     <th>小计</th>
     <th>删除</th>
   </thead>
   <tbody>
       <tr>
         <td><input class="check" type="checkbox"></td>
         <td><img src="images/1.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td>
         <td>5.00</td>
         <td>
           <span class="reduce">-</span>
           <input type="text" style="width:20px" value="1" class="goodsNum"/>
           <span class="add">+</span>
         </td>
         <td>5.00</td>
         <td><span class="delete">删除</span></td>
       </tr>
       
             <tr>
         <td><input class="check" type="checkbox"></td>
         <td><img src="images/2.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td>
         <td>5.00</td>
         <td>
           <span class="reduce">-</span>
           <input type="text" style="width:20px" value="1" class="goodsNum"/>
           <span class="add">+</span>
         </td>
         <td>5.00</td>
         <td><span class="delete">删除</span></td>
       </tr>
       
             <tr>
         <td><input class="check" type="checkbox"></td>
         <td><img src="images/3.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td>
         <td>5.00</td>
         <td>
           <span class="reduce">-</span>
           <input type="text" style="width:20px" value="1" class="goodsNum"/>
           <span class="add">+</span>
         </td>
         <td>5.00</td>
         <td><span class="delete">删除</span></td>
       </tr>
       
             <tr>
         <td><input class="check" type="checkbox"></td>
         <td><img src="images/4.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td>
         <td>5.00</td>
         <td>
           <span class="reduce">-</span>
           <input type="text" style="width:20px" value="1" class="goodsNum"/>
           <span class="add">+</span>
         </td>
         <td>5.00</td>
         <td><span class="delete">删除</span></td>
       </tr>
       
       
        <tr>
         <td><input class="check" type="checkbox"></td>
         <td><img src="images/5.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td>
         <td>5.00</td>
         <td>
           <span class="reduce">-</span>
           <input type="text" style="width:20px" value="1" class="goodsNum"/>
           <span class="add">+</span>
         </td>
         <td>5.00</td>
         <td><span class="delete">删除</span></td>
       </tr>
       
   </tbody>
</table>
<div id="foot">
<span id="foot_checkAll"><input type="checkbox" class="checkAll check" >全选</span><span class="delete" id="foot_delete">删除</span>
<span id="count">总共有<span id="num">0</span>件商品  共计：<span id="total">0.00</span></span><span id="pay"><input type="button" value="结算" style="width:80px;height:50px"></span>
</div>
</div>
<script type="text/javascript" src="shoppingCar.js" charset="gb2312"></script>
</body>
</html>

getTotal:
获取全选框
获取选择框
用一个for循环判断哪个框被选择了，选择了的话，把单价乘以数量累加到总价格

全选框onclick：效果是全选框被选择了，然后下面的所有选择框都会被选中（for），
同时：总价改变，商品总数改变。如果是取消了全选框则下面的所有选择框都会被取消，
同时：总价改变，商品总数改变。往商品件数div里添加（或删除）该商品的图片

选择框onclick:判断是被选择还是被取消，选择了的话，当行背景变高亮
（加上一个class，而该class在css中写好背景颜色的改变），总价改变，商品件数改变
如果是被取消了，className=""空，然后总价改变，商品件数改变,同时要把全选按钮取消

// JavaScript Document
/*
getTotal:
获取全选框
获取选择框
用一个for循环判断哪个框被选择了，选择了的话，把单价乘以数量累加到总价格

全选框onclick：效果是全选框被选择了，然后下面的所有选择框都会被选中（for），
 同时：总价改变，商品总数改变。如果是取消了全选框则下面的所有选择框都会被取消，
 同时：总价改变，商品总数改变。往商品件数div里添加（或删除）该商品的图片

选择框onclick:判断是被选择还是被取消，选择了的话，当行背景变高亮
（加上一个class，而该class在css中写好背景颜色的改变），总价改变，商品件数改变
  如果是被取消了，className=""空，然后总价改变，商品件数改变,同时要把全选按钮取消


获取加减按钮，可用事件代理
加：把前面的input元素里数量加1，同时用innerHTML把后面的小计更新，具体的值为当前商品的数量乘以价格
减：与加类似，不过在减1之前判断一下当前的数量是否大于1


删除onclick:首先是提示“确定要删除该商品吗？”，可以自己写一个函数美化弹出的窗口，当用户按下确定之后，
删除该行。

本身在设计之前要写一个div放置选中的商品的图片，display:none或者visibility:hidden.

已选商品件数onclick：可以显示选择了哪些商品.
显示该div（添加一个class属性，该属性在css中display:block或者visibility为visible

商品件数div里每张图片左上角的取消选择按钮，

最后一行选择删除按钮onclick：（先提示一下确定要删除这些商品吗）先判断全选按钮，为true的话把所有的行删掉。
为false的话再用一个for循环遍历选择框，如果选择了的话把该行删除。
*/
window.οnlοad=function(){
	var goodsNum=document.getElementsByClassName("goodsNum");
	var deletes=document.getElementsByClassName("delete");
    var checkAll=document.getElementsByClassName("checkAll");
    var check=document.getElementsByClassName("check");
	var table=document.getElementById("table");
    var trs=document.getElementById("table").rows;//包括th的值！！
    document.getElementById("foot").style.width=table.offsetWidth+"px";
    if(document.getElementsByClassName){
	 document.getElementsByClassName=function(str){
	 var all=document.getElementsByTagName("*");
	 var res=[];
	 for(var i=0;i<all.length;i++){
		 if(all[i].className==str || all[i].className==' '+str|| all[i].className==' '+str+' '||all[i]==' '+str)
		 {
		 res.push(all[i]);
		 }
		 }
		 return res;
	 }
 }
 function getTotal(){
	 var sum=0.00;
	 var count=0; 
	
	 for(var i=1;i<trs.length;i++){
		
	    if(trs[i].getElementsByTagName("input")[0].checked==true){
		   var num=parseInt(trs[i].getElementsByTagName("input")[1].value);
		   var price=parseFloat(trs[i].cells[2].innerHTML);
		   sum+=num*price;
		   count+=num;
		   sum.toFixed(2);
		   if(num!='NaN'){
		   trs[i].cells[4].innerHTML=(num*price).toFixed(2);
		   }else{
			   trs[i].cells[4].innerHTML="0.00";
			}
		}	
	
	 }
	if(count!=NaN){
		
	document.getElementById("num").innerHTML=count;
	}else{
		alert("It's NaN");
		document.getElementById("num").innerHTML=0;
		}
		if(sum!='NaN'){
	document.getElementById("total").innerHTML=sum.toFixed(2);}else{
		 document.getElementById("total").innerHTML="0.00";
		}
  }
  
 for(var i=0;i<checkAll.length;i++){
 checkAll[i].addEventListener("click",function(){
	 if(this.checked==true){
		 
		   for(var j=0;j<trs.length;j++){
			     var inputs=trs[j].getElementsByTagName("input");
				 inputs[0].checked=true;
				 inputs[0].parentNode.parentNode.className="on";
				 
			   }
			   
			   checkAll[(i+1)%2].checked=true;
			   getTotal();
			   
		 }else{
			    for(var j=0;j<trs.length;j++){
			     trs[j].getElementsByTagName("input")[0].checked=false; 
				 trs[j].getElementsByTagName("input")[0].parentNode.parentNode.className="";
				 
			   }
			    checkAll[(i+1)%2].checked=false;
				getTotal();
			 
		 }
	 },false) 
	
 }

 for(var i=0;i<goodsNum.length;i++){
	goodsNum[i].οnkeyup=function(){
	   getTotal();	
	} 
   	 
}
 //在table中用上事件代理
  table.addEventListener("click",function(event){
		var target=event.target||event.srcElement;							
		var cls=target.className;	
		switch(cls){
		  case "check":if(target.checked==true){
			    target.parentNode.parentNode.className="on";
			  }else if(target.checked==false){
				  for(var i=0;i<checkAll.length;i++){
					 
						    checkAll[i].checked=false;
						 
					  }
					   target.parentNode.parentNode.className="";
			  }
			  getTotal();
			  break;
		  case "reduce":
		        var value=parseInt(target.parentNode.parentNode.getElementsByTagName("input")[1].value);
			
				if(value>1){	
					target.parentNode.parentNode.getElementsByTagName("input")[1].value=value-1;		
				}
				getTotal();
				break;
			   
		  case "add":
		        var value=target.parentNode.parentNode.getElementsByTagName("input")[1].value;
				target.parentNode.parentNode.getElementsByTagName("input")[1].value=parseInt(value)+1;
				getTotal();
				break;
		
		  case "delete":if(confirm("您确定要删除该商品吗？")){
			     for(var i=0;i<trs.length;i++){
					 if(trs[i]==target.parentNode.parentNode){ table.deleteRow(i);break;}
					 }
			   			
			  };
		  break;
		}
    },false);
  var footDelete=document.getElementById("foot_delete");
  footDelete.οnclick=function(){
	  if(confirm("您确定要删除选中的商品吗？")){
	for(var i=1;i<trs.length;i++){
		  if(trs[i].getElementsByTagName("input")[0].checked==true ){
			    table.deleteRow(i);
			  }
		}  
	}
	}
  
}

获取加减按钮，可用事件代理
加：把前面的input元素里数量加1，同时用innerHTML把后面的小计更新，具体的值为当前商品的数量乘以价格
减：与加类似，不过在减1之前判断一下当前的数量是否大于1

删除onclick:首先是提示“确定要删除该商品吗？”，可以自己写一个函数美化弹出的窗口，当用户按下确定之后，
删除该行。

本身在设计之前要写一个div放置选中的商品的图片，display:none或者visibility:hidden.

已选商品件数onclick：可以显示选择了哪些商品.
显示该div（添加一个class属性，该属性在css中display:block或者visibility为visible

商品件数div里每张图片左上角的取消选择按钮，

最后一行选择删除按钮onclick：（先提示一下确定要删除这些商品吗）先判断全选按钮，为true的话把所有的行删掉。
为false的话再用一个for循环遍历选择框，如果选择了的话把该行删除。