Code for dynamic addition and statistics of table data based on jQuery _ jquery

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.
Figure (1.1)
The functional requirements of a logistics information system are as follows: 1.1. Each row in the table represents the information of a shipment. Billing weight And RateThen, it is required that the shipping fees be calculated automatically based on a certain formula, and the total shipping fees for all shipping goods can be 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 , Only Onblur Event in progress , Get rate and billing weight , Calculate the freight according to the formula.

It is not difficult to calculate the total cost.,Traverse all cost objects of the entire table,Calculate sum,Place the calculation result to the total text box object.

Difficult to dynamically Add the entire row of table data,In addition, events of various text box objects on each row of data must be automatically calculated and calculated.,It is quite difficult. If you useJavaScriptNeed to callDomCreate an objectCell,You also needTrAdd10Multiple CellsObject,Each cellTo add a text box object to an object,You also need to respond to the text box objectOnblurEvent Calculation,The amount of code is quite large.

UseJQueryThis greatly reduces the workload.,In actual development,UsedJQueryOfClone (true)Function,This function can createJQuryObject copy,And the parameter isTrueHour,YesCopy all event handlers for this element.

We can calculate the freight in the first line. Then, when you click the add detail button,CallJQueryOfClone (true)Function,Create a copy object for the first row and insert it to the bottom of the table.,BecauseClone (true)Event processing functions that can copy objects,ThereforeOnblurThe event and freight calculation functions are also successfully copied.,No further processing is required. This greatly reduces the workload.
Key code
(1) create a cloned cell object and add it to the table

The Code is as follows:

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

The Code is as follows:

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

The Code is as follows:

$ ("# 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); // displays 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.