jQuery實現表格式資料的動態添加與統計

來源:互聯網
上載者:User

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

單行貨物資訊計算運費不難實現,只需要在計費重量和費率的文字框對象的onblur事件中,得到費率和計費重量,按照公式計算好運費即可。

總計費用的統計也不難實現,遍曆整個表格的所有費用對象,統計其和,將計算結果放到總計的文字框對象即可。

痛點在動態添加整行表格式資料,而且每行資料上的各文字框對象的事件也要實現自動統計和運算,有相當的難度。如果使用JavaScript需要調用Dom對象建立一個儲存格,還需要在tr裡面添加10多個儲存格對象,每個儲存格對象內要添加文字框對象,還需要在文字框對象上響應onblur事件進行運費計算,代碼量相當大。

使用jQuery可以大大減輕工作量,在實際開發中,使用了jQuery的clone(true)函數,該函數可以建立一個jQury對象的副本,並且參數為true時,可以複製該元素的所有事件處理函數。

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

關鍵代碼

(一)建立複製儲存格對象並添加到表格中

 
  1. var v=$("#tbin");//得到表格的jquery對象   
  2. //所有的資料行有一個.MyRow的Class,得到資料行的大小  
  3. var vcount=$("#tbin tr").filter(".MyRow").size()+1;  
  4. //表格有多少個資料行    
  5. var vTr=$("#tbin #trDataRow1");  
  6.  //得到表格中的第一行資料      
  7. var vTrClone=vTr.clone(true);//建立第一行的副本對象vTrClone  
  8. vTrClone.appendTo(v);//把副本儲存格對象添加到表格下方 

(二)統計更新總金額

 
  1. function UpdateTotal()//更新總金額  
  2.       {  
  3.         var vTotalMoney=0;//總金額的初始值為0;              
  4.         var vTable=$("#tbin");//得到表格的jquery對象      
  5.          var vTotal= vTable.find("#txtTotal") ;//得到總金額對象  
  6.          var vtxtAfters=vTable.find("#txtMoney");//得到所有計算好的費用對象;  
  7.         vtxtAfters.each(   //使用jQuery的each函數遍曆每行費用對象,累加成總金額  
  8.             function(i)  
  9.             {  
  10.             var vTempValue=$(this).val();  
  11.                 if(vTempValue=="")  
  12.                 {  
  13.                     vTempValue=0;  
  14.                 }  
  15.             vTotalMoney=vTotalMoney+parseFloat(vTempValue);//計算總費用  
  16.             }  
  17.         )//遍曆結束  
  18.          vTotal.val(vTotalMoney); //將總費用顯示到對應文字框對象中  
  19.       }     

(三)計費重量變化時計算費用,並統計總費用

 
  1.  $("#txtMoneyWeight").bind("change", function()  
  2.         {  
  3.         var vTotalMoney=0;//總金額的初始值為0;     
  4.         var vtxtDetail=$(this);//得到變化的文字框對象       
  5.          var vVal=vtxtDetail.val();              
  6. var vtxtAfter=vtxtDetail.parent("td").parent("tr").find("#txtRate");  
  7.         //得到費率;  
  8. var vtxtMoney=vtxtDetail.parent("td").parent("tr").find("#txtMoney");  
  9. //得到費用;     
  10.  var vMoney=CalculatorMoney(vVal,vtxtAfter.val());  
  11. //使用公式計算單行運費   
  12.  vtxtMoney.val(vMoney);   
  13. //顯示單行運費資訊         
  14. UpdateTotal();   //調用函數統計更新總費用  
  15.   }); //變化指令碼結束 

鍵盤的控制和資料的校正在來源程式中有詳細注釋,具體代碼可參考來源程式。

原文連結:http://www.cnblogs.com/l_dragon/archive/2011/01/26/1945020.html

【編輯精選】

  1. 使用 jQuery 簡化 Ajax 開發
  2. jQuery1.5新特徵之外掛程式機制的救贖
  3. 精益求精 jQuery代碼的分析與最佳化
  4. jQuery1.5的六大細節改進:DOM操作更簡單
  5. jQuery入門:數組的三種類型三種操作
【責任編輯:陳貽新 TEL:(010)68476606】


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。