KOMPX.COM or COMPMISCELLANEA.COM   

Calculate sum of HTML table column in JavaScript

Summing up numbers from td's of a column of an HTML table in Javascript. Td's from the first and the last rows are excluded:

United Kingdom Population
England 56489.800
Scotland 5463.300
Wales 3267.501
Northern Ireland 1903.100
Total

HTML code:


<table>
	<tr>
		<th>United Kingdom</th>
		<th>Population</th>
	</tr>
	<tr>
		<td>England</td>
		<td>56489.800</td>
	</tr>
	<tr>
		<td>Scotland</td>
		<td>5463.300</td>
	</tr>
	<tr>
		<td>Wales</td>
		<td>3267.501</td>
	</tr>
	<tr>
		<td>Northern Ireland</td>
		<td>1903.100</td>
	</tr>
	<tr>
		<td>Total</td>
		<td></td>
	</tr>
</table>

JavaScript code:


<script>
var table = document.querySelector('table');
var lastCell = table.rows[ table.rows.length - 1 ].cells[ table.rows[ table.rows.length - 1 ].cells.length - 1 ];
var sum = 0;

for( var i = 1; i < table.rows.length - 1; i++ ){
	sum = sum + parseFloat( table.rows[ i ].cells[ 1 ].textContent );
}

lastCell.textContent = sum.toFixed( 3 );
</script>

Links

  1. HTMLTableElement: rows property developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows
  2. Number.prototype.toFixed() developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
Browser support
Windows
Internet Explorer 9.0+
Edge 12.0+
Firefox 1.0+
Google Chrome 1.0+
Opera 12.1+
Safari 3.1+
SeaMonkey 1.0+
Linux
Firefox 1.0+
Google Chrome / Chromium
Opera 12.1+
SeaMonkey 1.0+
iOS
Safari 1.0+
Android
Samsung Internet 1.0+
Chrome 18.0+
Firefox 4.0+
Opera 12.1+
More