HTML Sum of Column Needed - html

Question

I have the following html code for a table I am generating information from but I also need it to calculate the sum of the "TranAmt" column. Can someone help me with this?
<p>Hi Marly,</p>
<p>The following customer invoices were posted today:</p>
<table style="width: 1300px;" border="1" cellspacing="1.5" cellpadding="1.5" align="left">
<thead>
<tr style="background-color: #81BEF7;" align="center" valign="middle">
<td style="text-align: center;"><strong>Customer ID</strong></td>
<td style="text-align: center;"><strong>Customer Name</strong></td>
<td style="text-align: center;"><strong>Customer PO Number</strong></td>
<td style="text-align: center;"><strong>Invoice Number</strong></td>
<td style="text-align: center;"><strong>Invoice Date</strong></td>
<td style="text-align: center;"><strong>Post Date</strong></td>
<td style="text-align: center;"><strong>Invoice Amount</strong></td>
<td style="text-align: center;"><strong>Invoice Sales Tax Amount</strong></td>
<td style="text-align: center;"><strong>Create User</strong></td>
</tr>
</thead>
{BEGIN*REPEAT}
<tbody>
<tr>
<td>{CustID}</td>
<td>{CustName}</td>
<td>{CustPONo}</td>
<td>{TranID}</td>
<td>{TranDate}</td>
<td>{PostDate}</td>
<td>{TranAmt}</td>
<td>{STaxAmt}</td>
<td>{CreateUserID}</td>
</tr>
{END*REPEAT}
</tbody>
</table>

Answer 1

If you are using JQuery you can use the n-th child selector to add all the items of a column within a table.
http://api.jquery.com/nth-child-selector/
Here's an example
var rows = $("#table_id tr:gt(0)");
rows.children("td:nth-child(7)").each(function() {
the_sum += parseInt($(this).text());
});

Answer 2

This function will help you for getting the total of any column whose column header name you supplied to it. But I want to suggest one thing instead of tag names thead and tbody plz use some id, as it will create problem if you have multiple tables in the same page.
function someFunction() {
var invoiceTotalAmount = getTotal(("invoice amount").toUpperCase());
}
function getTotal(myString) {
var CellListing = $("thead > tr > td");
var selIndex=-1;
var sum = 0;
CellListing.each(function(index){
if($(this).children("strong").html().toUpperCase()===myString)
selndex= index+1;
});
var rows = $("tbody >tr");
rows.children("td:nth-child("+selIndex+")").each(function() {
sum += parseInt($(this).text());
});
return sum;
}
running example html sum of column needed

Answer 3

I don't know how to define variable in {FinalTranAmt} so i'm explain you
Tack a variable with initially 0 as value
For every repeat add {TranAmt} in {FinalTranAmt} & finally print it.
I don't know my structure is right or not.
{FinalTranAmt} = 0;
{BEGIN*REPEAT}
<tbody>
<tr>
<td>{CustID}</td>
<td>{CustName}</td>
<td>{CustPONo}</td>
<td>{TranID}</td>
<td>{TranDate}</td>
<td>{PostDate}</td>
<td>{TranAmt}</td>
<td>{STaxAmt}</td>
<td>{CreateUserID}</td>
</tr>
{FinalTranAmt} += {TranAmt} ;
{END*REPEAT}