<button class="add-on" onclick="chgNum(1,'del')" ><i class="icon-minus"></i></button>

       <input class="span3 text-center" id="appendedPrependedInput1" disabled="disabled" type="text" value="">

       <button class="add-on" onclick="chgNum(1,'add')"><i class="icon-plus"></i></button>
<script>

        function chgNum(ndid, opr){                       /** 点餐加减数量，参照以前的**/

            var index= parseInt($('#appendedPrependedInput'+ndid).val());

            var price = $('.price').html().substring();

            if(opr=='del'){

                if(index == ){

                    alert("不能减了！");

                    return ;

                }

                $("#appendedPrependedInput"+ndid).val(index - );

                index = index - ;

            }else if(opr=='add'){

                if(index == ){

                    alert('不能加了！');

                    return ;

                }

                $("#appendedPrependedInput"+ndid).val(index + );

                index = index + ;

            }

            $('.nums').html(index);

            $('.total').html(index*price+'元')

        }

    </script>

第二种方法：

<!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">

<head>

<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script> 

$(function(){

    $(".add").click(function(){

        var t=$(this).parent().find('input[class*=text_box]');

        t.val(parseInt(t.val())+)

        setTotal();

    }) 

    $(".min").click(function(){

        var t = $(this).parent().find('input[class*=text_box]');

            t.val(parseInt(t.val())-)

            if(parseInt(t.val())<){

                t.val();

            }

        setTotal();

    }) 

    function setTotal(){

        var s=;

        $("#tab td").each(function(){

            s +=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());

        });

        $("#total").html(s.toFixed());

    } 

    setTotal(); 

}) 

</script>

</head>

<body>

<table id="tab">

    <tr>

        <td>

            <span>单价:</span><span class="price">1.50</span>

            <input class="min" name="" type="button" value="-" />

            <input class="text_box" name="" type="text" value="" />

            <input class="add" name="" type="button" value="+" />

        </td>

    </tr>

    <tr>

        <td>

            <span>单价:</span><span class="price">3.95</span>

            <input class="min" name="" type="button" value="-" />

            <input class="text_box" name="" type="text" value="" />

            <input class="add" name="" type="button" value="+" />

        </td>

    </tr>

</table> 

<p>总价：<label id="total"></label></p> 

</body>

</html>

Js点餐加减数量的更多相关文章

  1. js处理小数加减时精度失真

    最近公司业务有用js处理数据加减,但有时候会出现很多位小数:后来发现是js处理小数时精度失真:为了后边不在犯类似错误,笔者觉得有必要记录下处理方法,当然处理方法有很多种,这里笔者找了一种较为简洁的方法 ...

  2. JS生成数字加减乘法验证码

    给大家分享一个简单的js验证码生成代码 PS:该代码依赖Jquery1.4版本以上 传入元素 如productionVerificationCode(#\(("a")) 反回验证码 ...

  3. js 日期 处理 加减时分秒

    1.日期处理 var _d = new Date("2018/01/01 12:00:00"); _d = new Date(_d.valueOf() + 60 * 1000);/ ...

  4. JS日期时间加减实现

    首先,上代码 var diffDate = function(date, diff) { return new Date( Date.UTC( date.getUTCFullYear(), date. ...

  5. js 对日期加减

    function getDate(days) { var now = new Date(), newDate = new Date(now.getTime() - 86400000 * days), ...

  6. jquery 仿购物车的加减数量

    <p>单价:3.95</p> <input id="min" name="" type="button" va ...

  7. js中两个日期大小比较，获取当前日期，日期加减一天

    一.两个日期大小比较 1.日期参数格式:yyyy-mm-dd // a: 日期a, b: 日期b, flag: 返回的结果 function duibi(a, b,flag) { var arr = ...

  8. js实现输入框数量加减【转】

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

  9. js实现购买数量加减效果

    写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...

随机推荐

  1. 数据结构——UVA 1600 机器人巡逻

    描述 A robot has to patrol around a rectangular area which is in a form of mxn grid (m rows and n colu ...

  2. [基础] 重载的时候什么时候用引用&

    一般返回值还要继续被处理,而不仅仅是得到其值的时候,返回引用& 一般有[], =, ++, --, 还有输入输出运算符<<, >> Classtype &ope ...

  3. POJ 2057 The Lost House

    题意:一只蜗牛,它的房子在树上的某个叶子节点上,它要从树的根节点出发,寻找自己的房子.树的任意两个节点的距离为1,房子出现在每个叶子节点上的可能性一样.有的节点上有虫子,如果有虫子,虫子会告诉蜗牛它的 ...

  4. 关于openoffice英文乱码的问题

    首先选中乱码的部分,然后在右边的侧栏中看到其字体,尝试改变它的字体,看会不会显示正常,如果可以,先记住这两种字体.然后:    工具->选项->字体        然后在使用替换表打上勾, ...

  5. [置顶] iOS 名片识别代码

    采用的是惠普图片识别SDK.本代码可以识别中文.代码改自 http://www.cocoachina.com/bbs/read.php?tid=123463 . 图片就不贴了,123463中的效果是可 ...

  6. [PWA] 2. Service worker life cycle

    Once serive worker is registered, the first time we go to the app, we cannot see the logs from servc ...

  7. CSU1661: Query Mutiple

    Description One day,Little-Y saw many numbers standing in a row. A question suddenly appeared in her ...

  8. “too many open files" ----增大打开的文件数

     http://www.cnblogs.com/ibook360/archive/2012/05/11/2495405.html [root@localhost ~]# ab -n -c http:/ ...

  9. 在Ubuntu上安装使用Systemtap

    因为最近开始学习Nginx,在网上看到别人介绍了一款强大的内核探测工具Systemtap,于是便准备学习下这款探测工具为以后代码分析做准备. 第一步便是安装.在自己电脑上安装的时候,也是费了一番劲儿. ...

  10. BestCoder冠军赛 - 1009 Exploration 【Tarjan+并查集缩点】

    [题意] 给一个图,这个图中既有有向边,又有无向边,每条边只能走一次,问图中是否存在环. 最多10^6个点,10^6个无向边,10^6个有向边 [题解] 因为既有有向边又有无向边,所以不能单纯的用ta ...