<?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>

jQuery实现购物车多物品数量的加减+总价+删除计算的更多相关文章

  1. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. JQuery购物车多物品数量的加减+总价计算

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  4. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  5. jquery实现input输入框点击加减数值随之变动

    <input class="addBtn min" type="button" value="-" /><input cl ...

  6. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  7. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  8. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  9. JQuery案例：购物车加减

    购物车加减 <head> <meta charset="UTF-8"> <title>加减购物车</title> <style ...

随机推荐

  1. EGOImageView的使用方法及注意事项

    1.下载EGOImageView及其相关的类库 EGOImageLoading 将EGOCache.EGOImageButton.EGOImageView.EGOImageLoader全部添加到工程下 ...

  2. HDU 4452 Running Rabbits （模拟题）

    题意: 有两只兔子,一只在左上角,一只在右上角,两只兔子有自己的移动速度(每小时),和初始移动方向. 现在有3种可能让他们转向:撞墙:移动过程中撞墙,掉头走未完成的路. 相碰: 两只兔子在K点整(即处 ...

  3. sp_send_dbmail权限问题

    这段时间处理SSIS服务器迁移的事情,在处理一个发送邮件的任务的时候,突然出现如下错误,  拒绝了对对象 'sp_send_dbmail' (数据库 'msdb',架构 'dbo')的 EXECUTE ...

  4. bzoj3926: [Zjoi2015]诸神眷顾的幻想乡 对[广义后缀自动机]的一些理解

    先说一下对后缀自动机的理解,主要是对构造过程的理解. 构造中,我们已经得到了前L个字符的后缀自动机,现在我们要得到L+1个字符的后缀自动机,什么需要改变呢? 首先,子串$[0,L+1)$对应的状态不存 ...

  5. 过滤器Filter(2)

    过滤器-编码统一处理 过滤器的写法如下 package com.gqx.encodeFilter; import java.io.IOException; import java.lang.refle ...

  6. Bootstrap-分页插件Paginator

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...

  7. oepn sync

    http://blog.csdn.net/cywosp/article/details/8767327 SYNOPSIS #include <sys/types.h> #include & ...

  8. 开启URL伪静态的方法

    ## 开启URL伪静态的方法.txt# 1. 请确认您服务器的类型. ThinkSNS的伪静态规则支持Apache.IIS.Nginx. 2. 请确认您的服务器支持URL Rewrite(可从服务器提 ...

  9. Linux grep用法整理

    grep -i 忽略大小写 grep --color grep -v 反向查找 grep -o 只显示被模式匹配到的字符串

  10. Clean Code 笔记 (一）：命名

    一.命名规范1.名副其实,通过名称我们知道它为什么存在,它做什么事,该怎么用2.避免误导,避免使用与本意相悖的词,提防使用不同之处较小的名称3.有意义的区分,去掉多余的废话比如:a,the.缺少明确约 ...