基于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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
javascript深入理解js闭包
Jul 03 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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
php生成固定长度纯数字编码的方法
2015/07/09 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
原生js轮播特效
2017/05/18 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
大学自荐信
2013/12/12 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
销售工作决心书
2015/02/04 职场文书
中学推普周活动总结
2015/05/07 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android