基于jQuery的表数据动态添加和统计代码

图(1.1)物流信息系统的功能需求如图1.1所示。表格中的每一行代表一个装运信息。输入每一行的计费重量和费率后，需要按照一定的公式自动计算出出货成本，自动统计所有出货的运费总额。运输货物信息的数据量(即表中的行数)是不确定的，需要动态增加或删除，即表中数据的行数是动态可维护的。同时，为了方便操作，需要像使用键盘的上、下、左、右方向键一样在页面上输入的文本框之间切换。每一行数据都有一定的验证要求，比如单号必须是8位数字，件数和重量必须是数字.单行货物信息计算运费不难，只需在计费重量和费率文本框对象的on bulr事件中获取费率和计费重量，根据公式计算运费即可。XML : namespace PREFIX=O/实现费用总额的统计并不难。遍历整个表中的所有费用对象，计算它们的总和，并将计算结果放入total文本框对象中。难点在于动态添加整行表格数据，自动统计计算每一行数据上每个文本框对象的事件是相当困难的。如果使用JavaScript，需要调用Dom对象来创建一个tr单元格，并且需要在tr中添加10个以上的单元格td对象。在每个单元格td对象中，需要添加一个文本框对象，并且需要响应文本框对象上的on bulr事件进行运费计算。代码量相当大。使用jQuery可以大大减少工作量。在实际开发中，使用了jQuery的clone(true)函数，可以创建jQury对象的副本，当参数为true时，可以复制这个元素的所有事件处理函数。我们可以计算第一行的运费。然后，当您单击添加详细信息按钮时，调用jQuery的克隆(true)函数在第一行创建一个复制对象，并将其插入到表的底部。因为clone(true)可以复制对象的事件处理函数，所以每行文本框的on bulr事件和运费计算函数也复制成功，不需要进一步处理。工作量大大减少。关键代码(1)创建一个克隆的单元对象，并将其添加到表格中。复制代码如下： var v=$(' # tbin ')；//获取表的jquery对象//所有的数据行都有一个Class。MyRow，并获取数据行varvcount=$ ('# tbintr ')的大小。筛选器('。my row’)。大小()1；//表中有多少数据行是var vTr=$(' # tbin # trdatarow 1 ')；//获取表中第一行数据var vTrClone=vtr . clone(true)；//在第一行创建复制对象vTrClone vTrClone . appendto(v)；//将复制单元格对象添加到表格底部。(2)统计更新总金额的复制代码如下：函数UpdateTotal()//更新总金额{ var vtotalmony=0；//总金额初始值为0；var vTable=$(' # tbin ')；//获取表的jquery对象var vto tal=vtable . find(' # txt total ')；//获取总量对象var vtxtafter=vtable . find(' # txt money ')；//获取所有已计算的费用对象；vtxtafters . each(///使用jQuery的each函数遍历每一行费用对象，并将其累加到total amount函数(I) {var vtempvalue=$ (this)中。val()；if(vTempValue==' '){ vTempValue=0；} vTotalMoney=vTotalMoney parseFloat(vTempValue)；//计算总成本})//遍历结束vtool . val(vtoolmoney)；//在对应的文本框对象中显示总成本} (3)计算计费权重变化时的成本，统计总成本。复制代码如下： $ ('# txtmoneyweight ')。bind ('change '，function(){ var vtotalmoney=0；//总金额初始值为0；var vtxtDetail=$(this)；//获取更改后的文本框对象var vVal=vtxtdetail . val()；var vtxtAfter=vtxtdetail . parent(' TD ')。父代(' tr ')。find(' # TxtRate ')；//获取速率；var vtxtMoney=vtxtdetail . parent(' TD ')。父代(' tr ')。find(' # TxtMoney ')；//获取费用；var vMoney=CalculatorMoney(vVal，vtxtafter . val())；//使用公式计算单线运费vtxtmoney . val(vMoney)；//显示单线货运信息UpdateTotal()；//调用函数统计更新的总成本})；//变更脚本结束键盘控制和数据验证。源程序中有详细的注释。具体代码请参考源程序。