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> 
  • 相关阅读:
    python学习之路---day16--面向对象
    python-day15---面向对象
    python---day14( 内置函数二)
    day13--------python 内置函数(一)
    python学习之路---day12
    python学习之路---day09
    python学习之路---day07
    【转帖】嵌入式4412开发板QT5.7编译安装到arm
    【转载】4412开发板嵌入式QtE应用开发环境搭建
    S5P4418开发板介绍
  • 原文地址:https://www.cnblogs.com/lin3615/p/3819155.html
Copyright © 2011-2022 走看看