Automatic table computing for table computing

Automatic table computing for table computing

Let's take a look at the real-time operation animation demonstration:

Subtotal for each row, quantity X unit price. The sum is to add all rows in the subtotal column in the table.

Html code:

<Table id = "Order"> <tr> <th> billing item </th> <th> quantity </th> <th> unit price </th> <th> Subtotal </th> </tr> <tr class = "trData"> <td> ItemA </td> <input type = "text" class = 'txtquantity '/> </td> <input type = "text" class = 'txtprice'/> </td> <input type = "text" class = 'txtamount '/> </td> </tr> <tr class = "trData"> <td> ItemB </td> <input type = "text" class =' txtQuantity '/> </td> <input type = "text" class = 'txtprice'/> </td> <input type = "text" class = 'txtamount '/> </td> </tr> <tr class = "trData"> <td> ItemC </td> <input type = "text" class = 'txtquantity '/> </td> <input type = "text" class = 'txtprice'/> </td> <input type =" text "class = 'txtamount '/> </td> </tr> <tr class =" trData "> <td colspan =" 3 "style =" text-align: right; "> total </td> <span id =" total "> </span> </td> </tr> </table>Source Code

Total calculation:

 

JQuery code:

CalcSum (); function CalcSum () {var total_sum = 0; $ ("# Order. txtAmount "). each (function () {var val = $ (this ). val (); if ($. isNumeric (val) {total_sum + = parseFloat (val) ;}}); $ ("# total" ).html (total_sum );}Source Code

 

Data Change event in any file box in the quantity column:

 

JQuery code:

$ ("# Order "). on ('input', '.txt Quantity ', function () {var self = $ (this); var tr = self. closest ("tr"); var quantity = self. val (); var Price = tr. find (". txtPrice "). val (); var amount = 0 if ($. isNumeric (quantity) & $. isNumeric (Price) {amount = quantity * Price;} tr. find (". txtAmount "). val (amount); CalcSum ();});Source Code

 

Data value change event in any text box in the unit price column of the table:

 

JQuery code:

$ ("# Order "). on ('input', '.txt price', function () {var self = $ (this); var tr = self. closest ("tr"); var quantity = tr. find (". txtQuantity "). val (); var Price = self. val (); var amount = 0 if ($. isNumeric (quantity) & $. isNumeric (Price) {amount = quantity * Price;} tr. find (". txtAmount "). val (amount); calcSum ();});Source Code