En mi aplicación web, creé una tabla y asigné valores para la tabla desde el controlador. Aquí quiero mostrar el total del valor de la columna Monto al final de la tabla.
Así que lo he hecho hasta ahora, pero no mostró el valor total.
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">Rs.@Html.DisplayFor(Model => Model.First().PaymentVouchDetails[i].Amount)</td> </tr> } </tbody> </table>Necesitas las filas. Las celdas no tienen celdas.
Además, una cantidad normalmente tiene decimales, por lo que los necesitamos como flotantes en lugar de enteros.
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>Sugiero usar tbody y una reducción en el contenido de texto convertido
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>puede sumar los elementos de la matriz simplemente usando el [método de reducción] [1] de javascript.
por ejemplo
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)puede tomar este fragmento y adaptarlo a sus necesidades [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?retiredLocale=it