Calculating Sum of table in HTML-CodePudding

In my web application, I have created table and assigned values for table from controller. Here I want to show the total of column value Amount at the end of table.

So I have done this so far but It didn't show the total value.

var tds = document.getElementById('PayvouchDt').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i  ) {
  sum  = parseInt(tds[i].cells[3].innerHTML);

}
document.getElementById('PayvouchDt').innerHTML  = '<tr><td>'   sum   '</td><td>Total Value</td></tr>';

<table class="table table-striped" id="PayvouchDt">
  <thead>
    <tr>
      <th>#</th>
      <th>Description</th>
      <th>Cost Center</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    @{int RowNo = 0;} @for (int i = 0; i
    < Model.First().PaymentVouchDetails.Count; i  ) { <tr>
      <td>@{RowNo  ;} @RowNo</td>
      <td>@Html.DisplayFor(Model => Model.First().PaymentVouchDetails[i].Details)</td>
      <td>@Html.DisplayFor(Model => Model.First().PaymentVouchDetails[i].CostCenter)</td>
      <td class="count-me">[email protected](Model => Model.First().PaymentVouchDetails[i].Amount)</td>
      </tr>
      }
  </tbody>
</table>

CodePudding user response：

You need the rows. The cells do not have cells

Also an amount normally have decimals so we need them as floats instead of ints

var trs = document.getElementById('PayvouchDt').getElementsByTagName('tr');
var sum = 0;
for (var i = 0; i < trs.length; i  ) {
  sum  = parseFloat(trs[i].cells[3].textContent);

}
document.getElementById('PayvouchDt').innerHTML  = '<tr><td>'   sum.toFixed(2)   '</td><td>Total Value</td></tr>';

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Description</th>
      <th>Cost Center</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody id="PayvouchDt">
    <tr>
      <td>1</td>
      <td>Details</td>
      <td>Costcenter</td>
      <td class="count-me">1.50</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Details</td>
      <td>Costcenter</td>
      <td class="count-me">3.20</td>
    </tr>
  </tbody>
</table>

I suggest to use the tbody and a reduce on the converted textContent

const tds = document.querySelectorAll('#PayvouchDt tr td.count-me'); // or td:nth-child(4)
const sum = [...tds].map(td =>  td.textContent).reduce((a, b) => a   b)
document.getElementById('PayvouchDt').innerHTML  = `<tr><td>${sum.toFixed(2)}</td><td>Total Value</td></tr>`;

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Description</th>
      <th>Cost Center</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody id="PayvouchDt">
    <tr>
      <td>1</td>
      <td>Details</td>
      <td>Costcenter</td>
      <td class="count-me">1.50</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Details</td>
      <td>Costcenter</td>
      <td class="count-me">3.20</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

you can sum the elements of the array simply using the javascript [reduce method][1].

for example

const myArray = [{value: 1, name: 'john'}, {value: 2, name: 'doe'}, {value: 3, name: 'john'}, {value: 4, name: 'doe'}];
const v = myArray.reduce((tot, el) => tot   el.value, 0);
console.log(v)

you can take this snippet and adapt it to your need [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?retiredLocale=it