JavaScript supports basic mathematical operations like addition, subtraction, division and so on. These mathematical operations makes sense on numbers, but in HTML, the data that we read is in string format, which means the data is to converted to a number, before we can perform mathematical operations on them. In this article, we will learn how to use jQuery to traverse all of the values in a HTML table column, convert the values to numbers, and then sum the values.

Create a new file called ‘TableCalculateTotal.html’ in a folder. We will need a simple HTML Table to get started. Our table has an id attribute of tblProducts and a thead , tbody and tfoot to go with it.

<table id="tblProducts">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>


The Table has 4 columns – Product, Quantity, Price and Sub-Total. It is assumed here that the Product and the Price info will be prepopulated (in your case probably from a database). When the user enters the Quantity, the Sub-Total is automatically calculated using Price x Quantity. The <tfoot> contains a row representing a GrandTotal which is the sum of all the cells in the Sub-Total column.

<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="220" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name=""/></td>
</tr>
</tfoot>
</table>


Let’s now see the script which will calculate the Sub-Total column values. We will also sum all of the values in the Sub-Total column, and display the result in the table footer.

The following script selects all of the table rows <tr>’s within the table body. The next step is to use jQuery's built-in each() iterator to loop over this collection of ‘tr’ elements. For each iteration of the loop, $(this) refers to a ‘tr’ element, which is being assigned to a local variable $row.

var $tblrows = $("#tblProducts tbody tr");
$tblrows.each(function (index) {
var $tblrow = $(this);

...
});

What if your table has no <thead>?

We are using a well-structured markup here with a ‘thead’ and ‘tbody’ so we could use $("#tblProd tbody tr") to select all rows in the table body. If you do not have a thead, tbody and instead your first row is a header row, then use this selector to skip the first row:
var $tblrows = $("#tblProducts tr:gt(0)");
Every time the user enters a value in the Quantity field, the subtotal column should be automatically populated by multiplying the Price with the Quantity entered. The following script achieves this functionality:

$tblrow.find('.qty').on('change', function () {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty,10) * parseFloat(price);

...
});


Both global functions parseInt and parseFloat convert strings to numbers. I tend to use parseFloat over parseInt, as it is more adaptable in scenarios where I am unsure if all of the numbers will be integers. parseFloat works with both integers and floating-point numbers. In this example, I am assuming that the values for Quantity are coming from my database, so they do not contain any decimals. In such scenarios, I can safely use parseInt for integer columns.

If you observe, the parseInt function has two arguments: a required numeric string, and an optional radix (base). The radix is the number’s base, as in base-8 (octal), base-10 (decimal) and base-16 (hexadecimal). If the radix is not provided, it’s assumed to be 10, for decimal. Although the second argument is optional, it’s considered a good practice to always provide it explicitly.

Full article...