使用jQuery实现购物车

本文实例为大家分享了jQuery实现购物车的具体代码，供大家参考，具体内容如下

HTML代码

  
    

      
储 物 仓
      

 

   
商品编号
   
商品名称
   
商品单价
   
商品颜色
   
商品库存
   
操作
 
      
      

 

   
2018090201
   
鼠标
   
78
   
黑色
   
500
   

     
   
 
 

   
2018090202
   
键盘
   
45
   
白色
   
300
   

     
   
 
 

   
2018090203
   
显示器
   
880
   
黑色
   
200
   

     
   
 
 

   
2018090204
   
主机
   
2332
   
蓝色
   
350
   

     
   
 
      
    
  
  
    

      
购 物 车
      

 

   
商品编号
   
商品名称
   
商品单价
   
商品颜色
   
购买数量
   
单项小计
   
操作
 
      
      

      
      

 

   
总计
   
0
 
      
    
  

CSS代码

    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 1000px;
      height: 350px;
      border: 3px solid #ccc;
      margin: 5px auto;
      overflow: auto;
    }
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      text-align: center;
      height: 30px;
    }
    caption {
      font-size: 28px;
      font-weight: bold;
    }
    #gwc input[type="text"] {
      width: 30px;
      margin-left: 4px;
      margin-right: 4px;
    }
    #gwc input[type="button"] {
      width: 20px;
    }

Javascript代码

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。