jquery 无刷新添加/删除 input行 实时计算购物车价格
jquery 无刷新添加/删除 input行 实时计算购物车价格
jquery 未来事件插件jq_Live_Extension.js
<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行 实时计算购物车价格的更多相关文章
- ASP.NET MVC使用jQuery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- [PHP] JQuery+Layer实现添加删除自定义标签代码
JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...
- jquery.axios无刷新机制删除
思路:无刷新机制就是不用的刷新动作 ,用前端html语法删除和后端的数据库删,同时删除达到效果 除操作,来实现无刷洗的方法
- jQuery无刷新上传学习心得
记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...
- jQuery无刷新上传之uploadify简单试用
先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...
- jquery无刷新文件上传 解决IE安全性问题
很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的 ...
- Js实现动态添加删除Table行示例
<table cellpadding="0" cellspacing="0" border="1" style="margi ...
- jQuery无刷新上传之uploadify
引自 文章 http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html 将文章里的代码整合在了一个解决方案里,直接可以下载测试,上代 ...
- jquery 无刷新上传的小function
function zll_up(click_id,up_url,text_id,show_id){ this.create = function(){} //当点击指定元素时,创建iframe for ...
随机推荐
- codevs 1540 1540 银河英雄传说
1540 银河英雄传说 题目描述 Description 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银 ...
- 初等数论及其应用——Lucas定理
Lucas定理用于解决较大组合数的取模问题,下面的理论整理源自冯志刚的<初等数论>,其与百度百科上呈现的Lucas定理形式上不同,但是容易看到二者的转化形式. 首先我们来整理一下冯志刚的& ...
- 第八届蓝桥杯c/c++省赛题目整理
第一题 标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都 ...
- springcloud入门系列(二)：注册中心Eureka
搭建注册中心Eureka 1.pom中依赖 <dependencies> <dependency> <groupId>org.springframework.clo ...
- Druid.io启用SQL支持
Druid.io的SQL功能虽然在试验阶段,但是也支持了大部分的功能,而且还可以通过 Avatica JDBC查看请求的json,有助于我们理解Druid.io的语法.Druid.io有个比较坑的是, ...
- vuex的安装
可以启动vue ui 手动添加vuex. 或使用 cnpm install vuex 2.使用,import vuex from “vuex” vue.use(vuex) 3.安装插件, 首先键入谷歌 ...
- vue、入门
入门vue v-on:click:chang 绑定事件点击 生面周期,整个vue的执行过程,他的应用执行了生面周期,也就是执行过程,这个执行过程如下图表,我们可以参考下图,也可以访问官方网址:ht ...
- Southwestern Europe Regional Contest 2015 题解
题目链接:http://codeforces.com/gym/101128 题目数7/10 Rank 34/209 A: 题意:给出一张n个点的有向图表示一家有n个员工的公司的隶属图,u->v表 ...
- 【转】shell命令中>/dev/null 2>&1的实现原理
异步执行 exec("/alidata/server/php/bin/php /nas/wxdoctor/index.php App/Common/WordsPic/user_id/&quo ...
- MyBatis3.4.0以上的分页插件错误：Could not find method on interface org.apache.ibatis.executor.statement.StatementHandler named prepare. Cause: java.lang.NoSuchMethodException: org.apache.ibatis.executor.stateme
错误: Could not find method on interface org.apache.ibatis.executor.statement.StatementHandler named p ...