jQuery实现购物车计算价格功能的方法

本文实例讲述了jQuery实现购物车计算价格功能的方法。分享给大家供大家参考。具体如下：

目的

实现在html界面修改购物车的件数，购物车商品价格的小计和总计要修改。

实现思路

1.当点击进入界面，刷新的时候触发body内的onload=""方法，跳转到JS代码。这样做的原因是在数据库内我们只会存储某客户的准备购买的商品件数，而不会存储每类商品价格的小计和购物车内所有物品的商品总价格，初始化的目的就是为将这些数字计算出来后显示在前台界面上。

2.当更改数量输入框中每个商品的数量时，整个购物表商品的价格，商品的小计和总计会根据数量发生变化。

成品样图展示

全部代码（火狐浏览器）

 
  
  
  
  
  
  
  
  
#imgtest {
 position: absolute;
 top: 100px;
 left: 400px;
 z-index: 1;
}
table {
 left: 100px;
 font-size: 20px;
}

 
 
  
  

  

  

   

    

     商品名称
    
    

     图片
    
    

     数量
    
    

     价格
    
    

     小计
    
   
   

    

     
商品1
     

      
     
     

      
     
     

      
      20
     
     

       元
     
    
    

     
商品2
     

      
     
     

      
     
     

      
      30
     
     

       元
     
    
    

     

      

     
     

      总计:  元
     
    
   
  
 

希望本文所述对大家的jQuery程序设计有所帮助。