用JS模拟购物车

需求：用Javascript模拟购物车页面，要求上面是商品，下面是购物车。按添加可以将上面的物品添加到下面的购物车中。

购物车中有加和减按钮，可以加减商品的数量。按删除可以将商品删除。

最后，每单件商品有价格合计，购物车中所有商品有总合计。

cart.html

  
    
    
    
    
  
  
    
真划算
    

      

        
商品
        
单价(元)
        
颜色
        
库存
        
好评率
        
操作
      
   
      

        
罗技M185鼠标
        
80
        
黑色
        
893
        
98%
        

          
        
      
      

        
微软X470键盘
        
150
        
黑色
        
9028
        
96%
        

          
        
      
      

        
洛克iphone6手机壳
        
60
        
透明
        
672
        
99%
        

          
        
      
      

        
蓝牙耳机
        
100
        
蓝色
        
8937
        
95%
        

          
        
      
      

        
金士顿U盘
        
70
        
红色
        
482
        
100%
        

          
        
      
    
  
    
购物车
    

      

        

          
商品
          
单价(元)
          
数量
          
金额(元)
          
删除
        
      
      

      
     

        

          
总计
          

          

        
      
    
    
  

cart.js

var all = 0;			//用全局变量记录总合计价格。

function add_shoppingcart(btn) {			//增加到购物车
	var tr = btn.parentNode.parentNode;
	var info = tr.children;
	var item = document.createElement("tr");
	var name = info[0].innerHTML;
	var price = parseInt(info[1].innerHTML);
	item.innerHTML = 				//创建购物车项
		''+name+''+
		''+price+''+
		''+
			' '+	//要加空格的原因：因为字符串用"+"连接，不会将换行符当作空格，所以和原生空格不对称，所以手动加一个空格。
			''+
			' '+	//函数要传入this，方便操作。
		''+
		''+price+''+
		'';
				//做完这一步，就可以将cart.html中购物车的第一行删除了
	var cart = document.getElementById("goods");
	cart.appendChild(item);
	tr.remove();
	
	all += price;		//改变全局总价
	changeTotal();				//刷新总价
}

function remove_shoppingcart(btn) {
	var tr = btn.parentNode.parentNode;
	var children = tr.children;
	var price = parseInt(children[3].innerHTML);
	all -= price;
	changeTotal();					//改变合计金额
	
	tr.innerHTML = "";				//将祖节点置空
}

function reduce(btn) {			//减少商品数量
	var amount = btn.nextElementSibling.value;
	if(amount==0){
		return;				//若商品等于0则退出		
	}
	amount--;
	btn.nextElementSibling.value = amount;		//更新商品数量
	
	var value = parseInt(btn.parentNode.previousElementSibling.innerHTML);	//获取商品单价
	btn.parentNode.nextElementSibling.innerHTML = value*amount;		//更新商品总价
	all -= value;		//更新全局总价。
	changeTotal();		//刷新总价
	
}

function increase(btn) {		//增加商品数量
	var amount = btn.previousElementSibling.value;
	amount++;
	btn.previousElementSibling.value = amount;		//更新商品数量
	
	var value = parseInt(btn.parentNode.previousElementSibling.innerHTML);
	btn.parentNode.nextElementSibling.innerHTML = value*amount;
	
	all += value;		//更新全局总价
	changeTotal();		//刷新总价
}

function changeTotal() {		//更新total函数，在每次改变购物车时使用。
	var total = document.getElementById("total");
	total.innerHTML = all;
}