基于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 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
如何用JS实现网页瀑布流布局
Apr 24 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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 和 MySQL 基础教程(四)
2006/10/09 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
PHP反射实际应用示例
2019/04/03 PHP
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
JavaScript实现Base64编码转换
2016/04/23 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
人资专员岗位职责
2014/04/04 职场文书
门面房租房协议书
2014/08/20 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python