基于jQuery实现表格数据的动态添加与统计的代码


Posted in Javascript onJanuary 31, 2011

基于jQuery实现表格数据的动态添加与统计的代码
                                                          图(1.1)
    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费。运送货物信息的数据量(即表格的行数)不定,要求能动态增加、删除,即表格的数据行数是动态可维护的。同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换。每行的数据有一定的校验要求,比如单号必须为8位数字,件数和重量必须为数字...
    单行货物信息计算运费不难实现,只需要在计费重量和费率的文本框对象的onblur事件中,得到费率和计费重量,按照公式计算好运费即可。<?XML:NAMESPACE PREFIX = O />

       总计费用的统计也不难实现,遍历整个表格的所有费用对象,统计其和,将计算结果放到总计的文本框对象即可。

       难点在动态添加整行表格数据,而且每行数据上的各文本框对象的事件也要实现自动统计和运算,有相当的难度。如果使用JavaScript需要调用Dom对象创建一个<tr>单元格,还需要在tr里面添加10多个单元格<td>对象,每个单元格<td>对象内要添加文本框对象,还需要在文本框对象上响应onblur事件进行运费计算,代码量相当大。

       使用jQuery可以大大减轻工作量,在实际开发中,使用了jQueryclone(true)函数,该函数可以创建一个jQury对象的副本,并且参数为true,可以复制该元素的所有事件处理函数。

我们可以在第一行中实现计算运费的运算。然后点增加明细按钮时,调用jQuery clone(true)函数,建立第一行的副本对象插入到表格下方,由于使用clone(true)可以复制对象的事件处理函数,所以每行中文本框的onblur事件和运费计算函数也被成功复制,不需再做处理。大大减轻了工作量。
    关键代码
(一)创建克隆单元格对象并添加到表格中

var v=$("#tbin");//得到表格的jquery对象 
//所有的数据行有一个.MyRow的Class,得到数据行的大小 
var vcount=$("#tbin tr").filter(".MyRow").size()+1;//表格有多少个数据行 
var vTr=$("#tbin #trDataRow1"); //得到表格中的第一行数据 
var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone 
vTrClone.appendTo(v);//把副本单元格对象添加到表格下方

(二)统计更新总金额
function UpdateTotal()//更新总金额 
{ 
var vTotalMoney=0;//总金额的初始值为0; 
var vTable=$("#tbin");//得到表格的jquery对象 
var vTotal= vTable.find("#txtTotal") ;//得到总金额对象 
var vtxtAfters=vTable.find("#txtMoney");//得到所有计算好的费用对象; 
vtxtAfters.each( //使用jQuery的each函数遍历每行费用对象,累加成总金额 
function(i) 
{ 
var vTempValue=$(this).val(); 
if(vTempValue=="") 
{ 
vTempValue=0; 
} 
vTotalMoney=vTotalMoney+parseFloat(vTempValue);//计算总费用 
} 
)//遍历结束 
vTotal.val(vTotalMoney); //将总费用显示到对应文本框对象中 
}

(三)计费重量变化时计算费用,并统计总费用
$("#txtMoneyWeight").bind("change", function() 
{ 
var vTotalMoney=0;//总金额的初始值为0; 
var vtxtDetail=$(this);//得到变化的文本框对象 
var vVal=vtxtDetail.val(); 
var vtxtAfter=vtxtDetail.parent("td").parent("tr").find("#txtRate");//得到费率; 
var vtxtMoney=vtxtDetail.parent("td").parent("tr").find("#txtMoney");//得到费用; 
var vMoney=CalculatorMoney(vVal,vtxtAfter.val());//使用公式计算单行运费 
vtxtMoney.val(vMoney); //显示单行运费信息 
UpdateTotal(); //调用函数统计更新总费用 
}); //变化脚本结束

键盘的控制和数据的校验在源程序中有详细注释,具体代码可参考源程序。

Javascript 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
jquery键盘事件介绍
Jan 31 #Javascript
javascript代码加载优化方法
Jan 30 #Javascript
javascript使用activex控件的代码
Jan 27 #Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 #Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 #Javascript
JavaScript 注册事件代码
Jan 27 #Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 #Javascript
You might like
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP插入排序实现代码
2013/04/04 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP中返回引用类型的方法
2015/04/03 PHP
PHP实现合并discuz用户
2015/08/05 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python 实现二维列表转置
2019/12/02 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
会计应聘求职信范文
2013/12/17 职场文书
领导干部培训感言
2014/01/23 职场文书
大学生社团活动总结
2014/04/26 职场文书
班委竞选演讲稿
2014/04/28 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
环保志愿者活动方案
2014/08/14 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
把77A收信机改造成收音机
2022/04/05 无线电
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android