jquery 无刷新添加/删除 input行 实时计算购物车价格

时间：2023-02-16 16:17:54

jquery 无刷新添加/删除 input行 实时计算购物车价格

jquery 未来事件插件jq_Live_Extension.js

jquery 无刷新添加/删除 input行 实时计算购物车价格
<script>

    $(document).ready(function(){

       //<tr/>居中

        $("#tab tr").attr("align","center");  

        //增加<tr/>

       $("#but").click(function(){

            var _len = $("#tab tr").length;

            $("#tab").append("<tr id="+_len+" align='center'>"

                               +"<td>"+_len+"</td>"

                               +"<td align='left'><input type='' name='product_id[]' value=\"\" onFocus=\"this.value=''\"/ class=\"order_form_product_description\" id='product_id"+_len+"'></td>"

                               +"<td><input type='text' name='quantity[]' id='quantity"+_len+"' class='num-pallets-input' ></td>"

                               +"<td><input type='text' name='price[]' id='price"+_len+"' class='price-per-pallet'/></td>"

                               +"<td class='row-total'><span id='thistotal"+_len+"' class='row-total-input'></span></td>"

                               +"<td><a href='javascript:void(0)' onclick=\'deltr("+_len+")\'><img src='form_del_icon.gif'></a></td>"

                           +"</tr>");

        })

   })  

    //删除<tr/>

    var deltr =function(index)

    {

       var _len = $("#tab tr").length;

        $("tr[id='"+index+"']").remove();//删除当前行  

       for(var i=index+1,j=_len;i<j;i++)

       {

            var nextTxtVal = $("#quantity"+i).val();

            var nextPriceVal= $("#price"+i).val();

            var nextproduct_idVal= $("#product_id"+i).val();

            var nextthistotalVal= $("#thistotal"+i).text();

            //alert (nextthistotalVal);

          $("tr[id=\'"+i+"\']")

                .replaceWith("<tr id="+(i-1)+" align='center'>"

                               +"<td>"+(i-1)+"</td>"

                               +"<td align='left'><input type='text' name='product_id[]' value='"+nextproduct_idVal+"' class=\"order_form_product_description\" id='product_id"+(i-1)+"'></td>"

                                +"<td><input type='text' name='quantity[]' value='"+nextTxtVal+"' id='quantity"+(i-1)+"' class='num-pallets-input'/></td>"

                                +"<td><input type='text' name='price[]' class='price-per-pallet' name='price"+(i-1)+"' value='"+nextPriceVal+"' /></td>"

                                +"<td class='row-total'><span class='row-total-input'>"+nextthistotalVal+"</span></td>"

                               +"<td><a href='javascript:void(0)' onclick=\'deltr("+(i-1)+")\'><img src='form_del_icon.gif'></a></td>"

                           +"</tr>");

         }    

         calcProdSubTotal();  

 }

</script>

<body>

   <table id="tab" border="0" width="500" align="center" style="margin-top:20px">

        <tr>

            <td></td>

            <td align="left"><span class="red">*</span>Product Description</td>

            <td><span class="red">*</span>Quantity</td>

            <td><span class="red">*</span>Unit Price (USD)</td>

            <td>Amount(USD)</td>

            <td></td>

     </tr>

     <tr>

     <td>1</td>

     <td align="left"><input type="" name="product_id[]" value="" onFocus="this.value=''" class="order_form_product_description" /></td>

     <td><input type="text" class="num-pallets-input" name="quantity[]" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"/></td>

     <td><input type="" class="price-per-pallet" name="price[]" onKeyPress="if (event.keyCode!=46 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false"></td>

     <td class="row-total"><span class="row-total-input"></span></td>

     <td></td>

     </tr>  

   </table>  

    <div style="margin-left:205px;margin-top:20px">

       <img src="add_more_products.gif" id="but" style="cursor:pointer"/>

    </div>

    <div style=" float:right; padding-right:50px; font-weight:bold">Total:<span class="red">US$<span id="product-subtotal">0</span></span><input type="hidden" name="product-subtotal" /></div>

</div>

jquery 无刷新添加/删除 input行 实时计算购物车价格的更多相关文章

  1. ASP&period;NET MVC使用jQuery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  2. &lbrack;PHP&rsqb; JQuery&plus;Layer实现添加删除自定义标签代码

    JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...

  3. jquery&period;axios无刷新机制删除

    思路:无刷新机制就是不用的刷新动作 ,用前端html语法删除和后端的数据库删,同时删除达到效果 除操作,来实现无刷洗的方法

  4. jQuery无刷新上传学习心得

    记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...

  5. jQuery无刷新上传之uploadify简单试用

    先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...

  6. jquery无刷新文件上传 解决IE安全性问题

    很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的 ...

  7. Js实现动态添加删除Table行示例

    <table cellpadding="0" cellspacing="0" border="1" style="margi ...

  8. jQuery无刷新上传之uploadify

    引自 文章 http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html 将文章里的代码整合在了一个解决方案里,直接可以下载测试,上代 ...

  9. jquery 无刷新上传的小function

    function zll_up(click_id,up_url,text_id,show_id){ this.create = function(){} //当点击指定元素时,创建iframe for ...

随机推荐

  1. web移动端资源整&lpar;1&rpar;

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  2. HttpURLConnection使用getInputStream无法执行

    url = new URL(urlStr); urlConn = (HttpURLConnection) url.openConnection(); // 设置请求方式为"GET" ...

  3. 驳 GarbageMan 的《一个超复杂的简介递归》——对延迟计算的实验和思考

    这是一篇因骂战而起的博文,GarbageMan 在该文章回复中不仅对我进行了侮辱,还涉及了我的母校,特写此文用理性的分析和实验予以回击. 在此也劝告 GarbageMan,没什么本事就别在那叫嚣了,还 ...

  4. mysql中-e用法

    实际应用中,不仅可以先登陆mysql再使用,还可以在链接的时候进行sql操作,此时需要加参数-e 例: >mysql -hlocalhost -P8080 -uroot -p123456 -e' ...

  5. CC Arithmetic Progressions &lpar;FFT &plus; 分块处理&rpar;

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题目:给出n个数,选出三个数,按下标顺序形成等差数 ...

  6. DBA优化SQL采用的WITH AS 用法简介

    一.WITH AS简介 WITH AS的用法从oracle 9i新增的,官方文档也称之为:subquery factoring;在进行复杂的查询.统计等操作时使用with as 子句可以大大提高性能! ...

  7. Cocos2d-x3&period;2游戏的核心循环在Application，怎样处理FPS不稳

    今天天气非常阴,立即要下雨了,陈吃早点功夫写点东西, 一场秋雨一场寒,十场秋雨要穿棉,各位从今往后多穿点 int Application::run() { if(!applicationDidFini ...

  8. 第16课 右值引用（3）&lowbar;std&colon;&colon;forward与完美转发

    1. std::forward原型 template <typename T> T&& forward(typename std::remove_reference< ...

  9. Hibernate中OpenSessionInViewFilter（通常配置在web&period;xml文件中）的作用

    Spring为我们解决Hibernate的Session的关闭与开启问题. Hibernate 允许对关联对象.属性进行延迟加载,但是必须保证延迟加载的操作限于同一个 Hibernate Sessio ...

  10. 初始python（二）

    1. 列表list 1.1 切片# 定义一个list.list = [1, 2, 3, 4, 5] 从左往右读取字符(默认步长为 1 ).如:list[-2:-1]  # 返回一个list数据类型,[ ...

相关文章