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
- HTMLTableElement: rows property developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows
- Number.prototype.toFixed() developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
Browser support
- Windows
- 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
- Adding a class to all sibling elements of a specific type in JavaScript
- Array to string in JavaScript
- Detecting a newly generated element and adding a class to it in JavaScript
- Detect if a class has been added (JavaScript)
- Getting the last class name in classList collection
- Removing the last character from a string in Javascript
- Transliterating Russian to English in JavaScript