jQuery實現表格數據的動態添加與統計
某物流信息系統中的功能要求如圖1.1所示,表格中每一行代表一筆運送貨物的信息,在錄入每行的計費重量和費率后,要求能按一定的公式，自動計算運送費用,并且能自動統計所有運送貨物的總運費。運送貨物信息的數據量(即表格的行數)不定,要求能動態增加、刪除,即表格的數據行數是動態可維護的。同時為了方便操作，需要在頁面中能像使用鍵盤的上下左右方向鍵，在錄入的文本框之間進行切換。每行的數據有一定的校驗要求，比如單號必須為8位數字，件數和重量必須為數字...
單行貨物信息計算運費不難實現,只需要在計費重量和費率的文本框對象的onblur事件中,得到費率和計費重量,按照公式計算好運費即可。
總計費用的統計也不難實現,遍歷整個表格的所有費用對象,統計其和,將計算結果放到總計的文本框對象即可。
難點在動態添加整行表格數據,而且每行數據上的各文本框對象的事件也要實現自動統計和運算,有相當的難度。如果使用JavaScript需要調用Dom對象創建一個單元格,還需要在tr里面添加10多個單元格對象,每個單元格對象內要添加文本框對象,還需要在文本框對象上響應onblur事件進行運費計算,代碼量相當大。
使用jQuery可以大大減輕工作量,在實際開發中,使用了jQuery的clone(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(); //調用函數統計更新總費用
- }); //變化腳本結束
鍵盤的控制和數據的校驗在源程序中有詳細注釋，具體代碼可參考源程序。
原文鏈接：http://www.cnblogs.com/l_dragon/archive/2011/01/26/1945020.html
【編輯推薦】
