某物流信息系統(tǒng)中的功能要求如圖1.1所示,表格中每一行代表一筆運送貨物的信息,在錄入每行的計費重量和費率后,要求能按一定的公式，自動計算運送費用,并且能自動統(tǒng)計所有運送貨物的總運費。運送貨物信息的數(shù)據(jù)量(即表格的行數(shù))不定,要求能動態(tài)增加、刪除,即表格的數(shù)據(jù)行數(shù)是動態(tài)可維護的。同時為了方便操作，需要在頁面中能像使用鍵盤的上下左右方向鍵，在錄入的文本框之間進行切換。每行的數(shù)據(jù)有一定的校驗要求，比如單號必須為8位數(shù)字，件數(shù)和重量必須為數(shù)字...

單行貨物信息計算運費不難實現(xiàn),只需要在計費重量和費率的文本框?qū)ο蟮膐nblur事件中,得到費率和計費重量,按照公式計算好運費即可。

總計費用的統(tǒng)計也不難實現(xiàn),遍歷整個表格的所有費用對象,統(tǒng)計其和,將計算結(jié)果放到總計的文本框?qū)ο蠹纯伞?/p>

難點在動態(tài)添加整行表格數(shù)據(jù),而且每行數(shù)據(jù)上的各文本框?qū)ο蟮氖录惨獙崿F(xiàn)自動統(tǒng)計和運算,有相當?shù)碾y度。如果使用JavaScript需要調(diào)用Dom對象創(chuàng)建一個單元格,還需要在tr里面添加10多個單元格對象,每個單元格對象內(nèi)要添加文本框?qū)ο?還需要在文本框?qū)ο笊享憫猳nblur事件進行運費計算,代碼量相當大。

使用jQuery可以大大減輕工作量,在實際開發(fā)中,使用了jQuery的clone(true)函數(shù),該函數(shù)可以創(chuàng)建一個jQury對象的副本,并且參數(shù)為true時,可以復制該元素的所有事件處理函數(shù)。

我們可以在***行中實現(xiàn)計算運費的運算。然后點增加明細按鈕時,調(diào)用jQuery 的clone(true)函數(shù),建立***行的副本對象插入到表格下方,由于使用clone(true)可以復制對象的事件處理函數(shù),所以每行中文本框的onblur事件和運費計算函數(shù)也被成功復制,不需再做處理。大大減輕了工作量。

關(guān)鍵代碼

(一)創(chuàng)建克隆單元格對象并添加到表格中

var v=$("#tbin");//得到表格的jquery對象   
//所有的數(shù)據(jù)行有一個.MyRow的Class,得到數(shù)據(jù)行的大小  
var vcount=$("#tbin tr").filter(".MyRow").size()+1;  
//表格有多少個數(shù)據(jù)行    
var vTr=$("#tbin #trDataRow1");  
 //得到表格中的***行數(shù)據(jù)      
var vTrClone=vTr.clone(true);//創(chuàng)建***行的副本對象vTrClone  
vTrClone.appendTo(v);//把副本單元格對象添加到表格下方 

(二)統(tǒng)計更新總金額

function UpdateTotal()//更新總金額  
      {  
        var vTotalMoney=0;//總金額的初始值為0;              
        var vTable=$("#tbin");//得到表格的jquery對象      
         var vTotal= vTable.find("#txtTotal") ;//得到總金額對象  
         var vtxtAfters=vTable.find("#txtMoney");//得到所有計算好的費用對象;  
        vtxtAfters.each(   //使用jQuery的each函數(shù)遍歷每行費用對象,累加成總金額  
            function(i)  
            {  
            var vTempValue=$(this).val();  
                if(vTempValue=="")  
                {  
                    vTempValue=0;  
                }  
            vTotalMoney=vTotalMoney+parseFloat(vTempValue);//計算總費用  
            }  
        )//遍歷結(jié)束  
         vTotal.val(vTotalMoney); //將總費用顯示到對應文本框?qū)ο笾? 
      }     

(三)計費重量變化時計算費用,并統(tǒng)計總費用

 $("#txtMoneyWeight").bind("change", function()  
        {  
        var vTotalMoney=0;//總金額的初始值為0;     
        var vtxtDetail=$(this);//得到變化的文本框?qū)ο?nbsp;      
         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();   //調(diào)用函數(shù)統(tǒng)計更新總費用  
  }); //變化腳本結(jié)束 

鍵盤的控制和數(shù)據(jù)的校驗在源程序中有詳細注釋，具體代碼可參考源程序。

原文鏈接：http://www.cnblogs.com/l_dragon/archive/2011/01/26/1945020.html

【編輯推薦】

1. 使用 jQuery 簡化 Ajax 開發(fā)
2. jQuery1.5新特征之插件機制的救贖
3. 精益求精 jQuery代碼的分析與優(yōu)化
4. jQuery1.5的六大細節(jié)改進:DOM操作更簡單
5. jQuery入門:數(shù)組的三種類型三種操作