<?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. 实现GetHashCode时要遵循的规则

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:实现GetHashCode时要遵循的规则.

  2. PowerDesigner建数据库模型增加自定义扩展属性

    PowerDesigner自7.x新增加一个特性,就是允许用户通过扩展模型的方式扩展模型的属性,但到底怎用一直搞不清楚．今天和同事商量准备直接在程序的Metadata信息实现上直接使用pdm时,我们需 ...

  3. Install Package and Software

    svn http://tortoisesvn.sourceforge.net/ git https://download.tortoisegit.org/ http://git-for-windows ...

  4. linux shell突然显示-bash-4.1#的解决方法

    老沙昨天还登录这个linux服务器,并且命令行好好的,今天突然在linux shell中不显示路径了,显示为-bash-4.1#. 以下是老沙的解决方案 vim ~/.bash_profile 如果没 ...

  5. 场景类(CCSence)

    场景与流程控制 在图2-1中,每一个节点中显示的内容相对不变.通常,我们把这些内容相对不变的游戏元素集合称作场景(scene),把游戏在场景之间切换的过程叫做流程控制(flow control). 在 ...

  6. Top 10 Mistakes Java Developers Make--reference

    This list summarizes the top 10 mistakes that Java developers frequently make. #1. Convert Array to ...

  7. 关于着色器LinearGradient的使用

    LinearGradient我们可以将之译为线型渐变.线型渲染等,译成什么不重要,重要的是它的显示效果是什么样子,今天我们就一起来看看. 先来看看LinearGradient的构造方法: /** Cr ...

  8. C#基础篇01

    vs20vs2013快捷键小节: 1>: #region #endregion(用来折叠冗余代码) 2>:Ctril+K+D快速对其代码: 3>:Ctril+K+C注释选中代码 Ct ...

  9. 利用java开发一个双击执行的小程序

    之前我们利用java写了很多东西,但是好像都没有什么实际意义. 因为有意义桌面小程序怎么都得有个界面,可是界面又不太好搞.或者 了解到这一层的人就少之又少了. 呀,是不是还得开辟一些版面来介绍awt和 ...

  10. 破解C#的readonly只读字段

    破解C#的readonly只读字段 目录 请允许我再唠叨几句const和readonly 修改readonly字段: 计策1:反间计 -- 反射修改 计策2:借刀杀人--调节字段偏移位置的结构体来修改 ...