Dynamic adding and statistics of tabular data by jquery

The functional requirements of a logistics information system as shown in Figure 1.1, each line in the table represents a shipment of information, in the input of each line of the billing weight and rates, requirements can be based on a certain formula, automatic calculation of shipping costs, and automatic statistics of all shipments of the total freight. The amount of data to be transported (i.e. the number of rows in the table) is variable, which requires dynamic increment and deletion, that is, the number of data rows in the table is dynamically maintainable. At the same time, in order to facilitate operation, need to be in the page like using the keyboard up and DOWN ARROW keys, in the text box to switch between the input. Each row of data has a certain calibration requirements, such as the number must be 8 digits, pieces and weight must be a number ...

Single-line cargo information calculation of freight is not difficult to achieve, only in the billing weight and rate of the text box object in the Onblur event, get the rate and billing weight, according to the formula calculation good freight can.

The total cost of the statistics is not difficult to achieve, traversing the entire table of all expense objects, statistics and the results of the calculation will be placed in the Total text box object.

The difficulty is to add the whole row of table data dynamically, and the events of each text box object on each row of data should be automatically counted and calculated, which is quite difficult. If you need to call a DOM object to create a cell by using JavaScript, you also need to add more than 10 cell objects to the TR, add text box objects within each Cell object, and perform freight calculations on the text box object in response to the onblur event, which is a large amount of code.

Using jquery can greatly reduce your workload, and in practice, you use the jquery Clone (true) function, which creates a copy of a Jqury object, and when the argument is true, you can copy all the event handler functions for that element.

We can implement the calculation of freight in the first line. Then when you add the detail button, call jquery's clone (true) function, create the first row of the replica object inserted below the table, because using Clone (true) can copy the object's event handler function, So the onblur event and freight calculation function of the text box in each line is copied successfully, no more processing is required. greatly reduced the workload.

Critical code

(i) Create a cloned Cell object and add it to the table

 
  
  

  
   
   
var v=$ ("#tbin");//The JQuery object that gets the table
  
   
   
All data rows have one. Myrow class, get the size of the data row
  
   
   
var vcount=$ ("#tbin tr"). Filter (". Myrow "). Size () +1;
  
   
   
How many rows of data are in a table
  
   
   
var vtr=$ ("#tbin #trDataRow1");
  
   
   
Get the first row of data in the table
  
   
   
var vtrclone=vtr.clone (true);//Create the replica object for the first row Vtrclone
  
   
   
Vtrclone.appendto (v);//Add the Replica Cell object to the table below
 
  
  

(ii) Statistical update of the total amount

 
 

  
  

  
function updatetotal ()//Update total amount
  
  

  
{
  
  

  
The initial value of the total amount of Var vtotalmoney=0;//is 0;
  
  

  
var vtable=$ ("#tbin");//The JQuery object that gets the table
  
  

  
var vtotal= vtable.find ("#txtTotal");//Get Total Amount Object
  
  

  
var vtxtafters=vtable.find ("#txtMoney");//Get all the calculated expense objects;
  
  

  
Vtxtafters.each (///using each function of jquery to iterate through each line of expense objects, add up to total amount
  
  

  
function (i)
  
  

  
{
  
  

  
var vtempvalue=$ (this). Val ();
  
  

  
if (vtempvalue== "")
  
  

  
{
  
  

  
vtempvalue=0;
  
  

  
}
  
  

  
Vtotalmoney=vtotalmoney+parsefloat (Vtempvalue)//calculation of total cost
  
  

  
}
  
  

  
)//Traversal End
  
  

  
Vtotal.val (Vtotalmoney); Display total charges to the corresponding text box object
  
  

  
}
 
 

(iii) Calculation of costs in the case of changes in billing weight and total cost

 
 

  
  

  
$ ("#txtMoneyWeight"). Bind ("Change", function ()
  
  

  
{
  
  

  
The initial value of the total amount of Var vtotalmoney=0;//is 0;
  
  

  
var vtxtdetail=$ (this);//Changed text box object
  
  

  
var vval=vtxtdetail.val ();
  
  

  
var vtxtafter=vtxtdetail.parent ("TD"). Parent ("tr"). Find ("#txtRate");
  
  

  
Receive rates;
  
  

  
var vtxtmoney=vtxtdetail.parent ("TD"). Parent ("tr"). Find ("#txtMoney");
  
  

  
Get the cost;
  
  

  
var Vmoney=calculatormoney (Vval,vtxtafter.val ());
  
  

  
Calculate a single line of freight with a formula
  
  

  
Vtxtmoney.val (Vmoney);
  
  

  
Show single line freight information
  
  

  
Updatetotal (); Call function statistic Update Total cost
  
  

  
}); Change Script End
 
 

Keyboard control and data validation in the source program has detailed comments, specific code can refer to the source program.

Original link: http://www.cnblogs.com/l_dragon/archive/2011/01/26/1945020.html

"Edit Recommendation"

1. Simplifying Ajax development with JQuery
2. The redemption of the plug-in mechanism of jQuery1.5 new features
3. Analysis and optimization of jquery Code for Excellence
4. Six details of jQuery1.5 improvements: DOM operations are simpler
5. Getting Started with jquery: three types of arrays of three kinds of operations

"Responsible editor: Chen Yu new TEL: (010) 68476606"