How to reduce JavaScript code when I'm trying to sum of table colums?

Question

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/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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!

score 1 · Answer 1 · answered Apr 13 '22 at 10:10

You can:

get the number of columns
loop each column
td:nth-child(col) to get all the TDs for that column
.map to apply your parseFloat on each value
.get() to convert jquery collection to an array
.reduce() to sum them all (see this answer)

Notes:

:nth-child is 1-based, so need to use cols.length rather than usual cols.length - 1
need to loop cols from 2 to skip first column, and using 1-based
added a totals class to the totals TR so that it can be excluded from the totals calculation and so we know where to put the final value. Could also use something like :not(:last-child) or similar.
no need for the loop1 etc classes, but you may have them for other reasons
this assumes your columns are to be totalled and you're not totalling "loop1" values that may be in different columns

Giving:

var cols = $("thead th").length;

for (var c = 2; c <= cols; ++c) {

  var total = $("tbody tr:not(.totals) td:nth-child(" + c + ")")
    .map((i, e) => parseFloat($(e).text()))
    .get()
    .reduce((p, c) => p + c, 0)

  $("tbody tr.totals td:nth-child(" + c + ")").text(total);
}

.totals > td { font-weight:bold; font-style:italic; border-top:1px solid #CCC; }

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Store</th>
      <th>Sale</th>
      <th>Revenue</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="totals">
      <td>Total</td>
      <td class="total1"></td>
      <td class="total2"></td>
      <td class="total3"></td>
      <td class="total4"></td>
    </tr>

  </tbody>
</table>

How to reduce JavaScript code when I'm trying to sum of table colums?

1 Answers1