基于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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
js校验开始时间和结束时间
May 26 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php实现的双色球算法示例
2017/06/20 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
使用tensorflow实现AlexNet
2017/11/20 Python
python实现彩色图转换成灰度图
2019/01/15 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
remote接口和home接口主要作用
2013/05/15 面试题
演讲稿开场白
2014/01/13 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
个人委托书范本
2014/09/13 职场文书
求职推荐信范文
2015/03/27 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书