<?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. tensorflow 实现线性方程

    下面的直接是代码: #!usr/bin/env python#coding:utf-8"""这个代码的作用是 通过 tensorflow 来计算 y = 0.3x + 0 ...

  2. Android ArrayAdpater 填充集合

    在这里我们新创建一个任务来演示 然后再布局文件中定义一个ListView 来当作显示数据的容器,布局文件代码如下: <LinearLayout xmlns:android="http: ...

  3. 征服 Nginx + Tomcat【转】

    征服 Nginx + Tomcat Server Architecture/Distributed nginxtomcatsessioncluster  2年前一直折腾Apache,现如今更习惯Ngi ...

  4. [Form Builer]Locking Mode and LOCK_RECORD

    Locking Mode Property Description Specifies when Oracle Forms tries to obtain database locks on rows ...

  5. Ubuntu 14.04 LAMP搭建小记

    文章目录 LAMP WinQQ Ubuntu 的使用的建模工具 JDK Chormium flash Eclipse 无法找到Jre LAMP 参考资料: 1. 安装php环境   http://ww ...

  6. (转)CSS行高——line-height

    原文地址:http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了 ...

  7. Android开发之Adapter

    学习android时,对于我这种初学者来说,刚开始接触控件,发现有的控件需要adapter有些不需要,对此我感到不解.所以决定一探究竟. 其实android是一个完全遵从MVC模式的框架,activi ...

  8. 堆排序算法（C#实现）

    在软件设计相关领域,“堆(Heap)”的概念主要涉及到两个方面: 一种是数据结构,逻辑上是一颗完全二叉树,存储上是一个数组对象(二叉堆). 另一种是垃圾收集存储区,是软件系统可以编程的内存区域. 本文 ...

  9. tableview刷新某个区域（section）或者某一行（row）

    //一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSections:in ...

  10. jfinal不能正确加载html网页，总是报错的解决方法

    今天自学jfinal,遇到一个很奇怪的问题,render("/index.html");总是报错. 仔细看错误日志,才发现原来是因为html网页放到了WEB-INF文件夹下面了,所 ...