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

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

　　總計費用的統(tǒng)計也不難實現(xiàn),遍歷整個表格的所有費用對象,統(tǒng)計其和,將計算結果放到總計的文本框對象即可。

　　難點在動態(tài)添加整行表格數(shù)據(jù),而且每行數(shù)據(jù)上的各文本框對象的事件也要實現(xiàn)自動統(tǒng)計和運算,有相當?shù)碾y度。如果使用JavaScript需要調用Dom對象創(chuàng)建一個單元格,還需要在tr里面添加10多個單元格對象,每個單元格對象內要添加文本框對象,還需要在文本框對象上響應onblur事件進行運費計算,代碼量相當大。

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

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

　　關鍵代碼

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

   1. varv=$("#tbin");//得到表格的jquery對象
   2. //所有的數(shù)據(jù)行有一個.MyRow的Class,得到數(shù)據(jù)行的大小
   3. varvcount=$("#tbintr").filter(".MyRow").size()+1;
   4. //表格有多少個數(shù)據(jù)行
   5. varvTr=$("#tbin#trDataRow1");
   6. //得到表格中的第一行數(shù)據(jù)
   7. varvTrClone=vTr.clone(true);//創(chuàng)建第一行的副本對象vTrClone
   8. vTrClone.appendTo(v);//把副本單元格對象添加到表格下方        

        

        
        
      
        
it知識庫：應用jQuery實現(xiàn)表格數(shù)據(jù)的動態(tài)添加與統(tǒng)計，轉載需保留來源！
        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。