<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.
com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover
table-striped" id="hancie">
<thead class="bg-success text-white">
<tr>
<th>ID</th>
<th>Date</th>
<th>Amount</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2022-01-01</td>
<td>Rs. 100.00</td>
<td>Example 1</td>
</tr>
<tr>
<td>2</td>
<td>2022-01-02</td>
<td>Rs. 250.50</td>
<td>Example 2</td>
</tr>
<tr>
<td>3</td>
<td>2022-01-03</td>
<td>Rs. 75.00</td>
<td>Example 3</td>
</tr>
<tr>
<td></td>
<td></td>
<td id="total"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script>
var table = document.getElementById("hancie");
var rows = table.rows;
var total = 0;
for (var i = 1; i < rows.length - 1; i++) {
var cells = rows[i].cells;
var amount = cells[2].innerText.trim().replace
('Rs. ', '').replace(',', '');
total += parseFloat(amount);
}
document.getElementById("total").innerHTML = "Rs. "
+ total.toLocaleString('en-IN');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.
js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.
2/js/bootstrap.min.js"></script>
</body>
</html>
