Dynamic addition and statistics of table data using jQuery

The functional requirements of a logistics information system are as follows: 1.1. Each row in the table represents the information of a shipment. after entering the billing weight and rate of each row, you must follow a certain formula, the shipping fee is calculated automatically and the total shipping fees for all shipping items are calculated automatically. The volume of data (that is, the number of rows in the table) of the shipping cargo information is not fixed, and the quantity must be dynamically increased or deleted. That is, the number of rows in the table is dynamically maintained. At the same time, to facilitate the operation, you need to be able to switch between the input text boxes, like using the upper, lower, and right arrow keys on the keyboard on the page. Each row of data has certain verification requirements. For example, the single number must be 8 digits, and the number and weight must be numbers...

It is not difficult to calculate the freight for a single-line cargo information. You only need to get the rate and billing weight in the onblur event of the text box object of the billing weight and rate, and calculate the freight according to the formula.

The total cost is not hard to achieve. traverse all the expense objects in the entire table, calculate the sum, and place the calculation result to the total text box object.

It is quite difficult to dynamically Add the entire row of table data, and to automatically calculate the events of various text box objects on each row of data. If you want to use JavaScript to call the Dom object to create a cell, you also need to add more than 10 cell objects in tr, and add text box objects in each cell object, you also need to respond to the onblur event on the text box object for freight calculation. The amount of code is quite large.

JQuery can greatly reduce the workload. In actual development, the clone (true) function of jQuery is used. This function can create a copy of a jQury object and the parameter is true, you can copy all event handlers for this element.

We can calculate the freight in the first line. Then, when you click the add detail button, call the jQuery clone (true) function to create a copy object for the first row and insert it to the bottom of the table. Because clone (true) is used) the event handler function of the object can be copied. Therefore, the onblur event and freight calculation function of the text box in each line are also copied successfully, and no processing is required. This greatly reduces the workload.

Key code

(1) create a cloned cell object and add it to the table

 
 

  
  
Var v = $ ("# tbin"); // obtain the jquery object of the table.
  
  
// All data rows have A. MyRow Class to get the size of the Data row
  
  
Var vcount = $ ("# tbin tr"). filter (". MyRow"). size () + 1;
  
  
// Number of data rows in the table
  
  
Var vTr = $ ("# tbin # trDataRow1 ");
  
  
// Obtain the first row of data in the table
  
  
Var vTrClone = vTr. clone (true); // create the first row of the copy object vTrClone
  
  
VTrClone. appendTo (v); // Add the copy Cell Object to the bottom of the table.
 
 

(2) collect the total update amount

 
 

  
  
Function UpdateTotal () // total update amount
  
  
{
  
  
Var vTotalMoney = 0; // the initial value of the total amount is 0;
  
  
Var vTable = $ ("# tbin"); // obtain the jquery object of the table.
  
  
Var vTotal = vTable. find ("# txtTotal"); // get the total amount object
  
  
Var vtxtAfters = vTable. find ("# txtMoney"); // obtain all the calculated fees;
  
  
VtxtAfters. each
  
  
Function (I)
  
  
{
  
  
Var vTempValue = $ (this). val ();
  
  
If (vTempValue = "")
  
  
{
  
  
VTempValue = 0;
  
  
}
  
  
VTotalMoney = vTotalMoney + parseFloat (vTempValue); // calculate the total fee
  
  
}
  
  
) // The traversal ends.
  
  
VTotal. val (vTotalMoney); // display the total fee to the corresponding text box object
  
  
}
 
 

(3) Calculate the fee when the billing weight changes and calculate the total fee

 
 

  
  
$ ("# TxtMoneyWeight"). bind ("change", function ()
  
  
{
  
  
Var vTotalMoney = 0; // the initial value of the total amount is 0;
  
  
Var vtxtDetail = $ (this); // get the changed text box object
  
  
Var vVal = vtxtDetail. val ();
  
  
Var vtxtAfter = vtxtDetail. parent ("td"). parent ("tr"). find ("# txtRate ");
  
  
// Get the rate;
  
  
Var vtxtMoney = vtxtDetail. parent ("td"). parent ("tr"). find ("# txtMoney ");
  
  
// Get the fee;
  
  
Var vMoney = CalculatorMoney (vVal, vtxtAfter. val ());
  
  
// Use the formula to calculate the single-line freight
  
  
VtxtMoney. val (vMoney );
  
  
// Display the freight information for a single row
  
  
UpdateTotal (); // call the function to calculate the total fee for updating.
  
  
}); // The change script ends.
 
 

Keyboard control and data verification are annotated in the source program. For specific code, see the source program.

Original article:Http://www.cnblogs.com/l_dragon/archive/2011/01/26/1945020.html