基于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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
react基本安装与测试示例
Apr 27 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
mysql+php分页类(已测)
2008/03/31 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
django允许外部访问的实例讲解
2018/05/14 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
jupyter实现重新加载模块
2020/04/16 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
技校生自我鉴定
2013/12/08 职场文书
求职意向书
2014/07/29 职场文书
2014年网管工作总结
2014/12/11 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
python创建字典及相关管理操作
2022/04/13 Python