基于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 function、指针及内置对象
Feb 19 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
vue组件生命周期详解
Nov 07 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 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中目录,文件操作详谈
2007/03/19 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP图片水印类的封装
2017/07/06 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
通过C++学习Python
2015/01/20 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
详解在Python中处理异常的教程
2015/05/24 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
外联部演讲稿
2014/05/24 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书