基于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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
js动态引入的四种方法
May 05 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
Zend 输出产生XML解析错误
2009/03/03 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python处理xml文件的方法小结
2017/05/02 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
工程质量承诺书
2014/03/27 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
mysql部分操作
2021/04/05 MySQL
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android