zoukankan      html  css  js  c++  java
  • jQuery实现购物车多物品数量的加减+总价+删除计算

     <?php
    session_start();
     ?>
     <!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"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head> 
    <title>jQuery实现购物车多物品数量的加减+总价+删除计算</title> 
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
    <script> 
    $(function(){ 
        var _url = $('#siteurl').val();
        $('.delete').click(function(){
          var t=$(this).parent('td').parent('tr');
          var tt=$(this).parent('td').find('input[class*=text_box]');
          tt.val(0);
            
    
          setTotal();
          t.hide();
        });
    
        $(".add").click(function(){ 
            var t=$(this).parent('td').find('input[class*=text_box]'); 
            t.val(parseInt(t.val())+1); 
            setTotal(); 
        }); 
    
        $(".min").click(function(){ 
            var t=$(this).parent('td').find('input[class*=text_box]'); 
            t.val(parseInt(t.val())-1) 
            if(parseInt(t.val())<1){ 
                t.val(1); 
            } 
    
        setTotal(); 
      });
    
      $('.text_box').keyup(function(){
        setTotal();
      });
      
      function setTotal(){ 
        var s=0; 
        $("#tab td").each(function(){ 
          var numbers = parseInt($(this).find('input[class*=text_box]').val());
          if($.isNumeric(numbers))
          {
                numbers = parseInt(numbers);
          }else
         {
            numbers = 0;
         }
          $(this).find('input[class*=text_box]').val(numbers);
          s += numbers*parseFloat($(this).find('span[class*=price]').text()); 
    
            // bof 用ajax在_url中删除指定的购物车中$_SESSION相关信息
            var pid =$(this).find('input[class*=product_id]');
            $.ajax({
                url:_url,
          type: 'post',
                data:{proid : pid.val()},
                success: function(data){ 
                    // 回应    
                }
            }); 
            // end
        }); 
        $("#total").html(s.toFixed(2)); 
      } 
     // setTotal(); 
    
    }); 
    </script> 
    </head> 
    <body> 
    <form action="./myform.php" method="post">
    <input type="hidden" name="siteUrl" id="siteurl" value="siteUrl.php" />
    <table id="tab"> 
    <tr> 
    <td> 
    <span>单价:</span><span class="price">1.50</span> 
    <input class="product_id" type="hidden" name="product_id" value="value" />
    <input class="min" name="" type="button" value="-" /> 
    <input class="text_box" name="name2" type="text" value="1" /> 
    <input class="add" name="" type="button" value="+" /> 
    <a href="javascript:void(0);" class="delete">删除</a>
    </td> 
    </tr> 
    <tr> 
    <td> 
    <span>单价:</span><span class="price">3.95</span> 
    <input class="min" name="" type="button" value="-" /> 
    <input class="text_box" name="name1" type="text" value="1" /> 
    <input class="add" name="" type="button" value="+" /> 
    <a href="javascript:void(0);" class="delete">删除</a>
    </td> 
    </tr> 
    </table> 
    <input type="submit" name="submit" value="submit" />
    </form>
     总价:<label id="total"></label>  
     <div id="product_id_value"><?php print_r($_SESSION); ?></div>
    </body> 
    </html> 
  • 相关阅读:
    tabbar 旋转指定的页面
    GDAL中文路径不能打开&Shp文件字段属性值中文乱码
    Project : error PRJ0019: 工具从"Moc'ing xxx.h..."
    详解Android中的屏幕方向
    qt中获取文件路径和文件名
    vs2005下Qt项目中修改exe图标的方法
    Qt & C/C++统计运行时间
    Qt 中Treewidget添加右键菜单
    QT 中文乱码解决方案
    Qt多线程应用QRunnable显示进度条示例
  • 原文地址:https://www.cnblogs.com/lin3615/p/3819155.html
Copyright © 2011-2022 走看看