I have a table & I want to total of columns data, this is working fine but now I want to reduce JavaScript code
how can I do that?
My Code:-
var TotalValue1 = 0;
var currentRow1 = '';
$("tr .loop1").each(function(index, value) {
currentRow1 = parseFloat($(value).text());
TotalValue1 += currentRow1
});
$('.total1').text(TotalValue1);
var TotalValue2 = 0;
var currentRow2 = '';
$("tr .loop2").each(function(index, value) {
currentRow2 = parseFloat($(value).text());
TotalValue2 += currentRow2
});
$('.total2').text(TotalValue2);
var TotalValue3 = 0;
var currentRow3 = '';
$("tr .loop3").each(function(index, value) {
currentRow3 = parseFloat($(value).text());
TotalValue3 += currentRow3
});
$('.total3').text(TotalValue3);
var TotalValue4 = 0;
var currentRow4 = '';
$("tr .loop4").each(function(index, value) {
currentRow4 = parseFloat($(value).text());
TotalValue4 += currentRow4
});
$('.total4').text(TotalValue4);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Store</th>
<th>Sale</th>
<th>Revenu</th>
<th>Payout</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td class="loop1">20</td>
<td class="loop2">34</td>
<td class="loop3">65</td>
<td class="loop4">26</td>
</tr>
<tr>
<td>John</td>
<td class="loop1">76</td>
<td class="loop2">93</td>
<td class="loop3">27</td>
<td class="loop4">83</td>
</tr>
<tr class="font-weight-bold">
<td>Total</td>
<td class="total1"></td>
<td class="total2"></td>
<td class="total3"></td>
<td class="total4"></td>
</tr>
</tbody>
</table>
</body>
</html>
ThankYou!