0
382
ViewsCómo sumar dinámicamente todas las columnas para la tabla HTML usando JS
Soy nuevo en JS. He estado tratando de sumar cada columna dinámicamente para que, a medida que haya un nuevo año, sume automáticamente la columna. Hasta ahora solo puedo hacer que funcione para 1 columna a la vez. Cualquier ayuda es muy apreciada.
function computeTableColumnTotal(colNumber) { var result = 0; try { var tableBody = document.querySelector("tbody"); var howManyRows = tableBody.rows.length; for(var i = 1; i < (howManyRows-1); i ++) { var thisNumber = parseInt(tableBody.rows[i].cells[colNumber].childNodes.item(0).data); if (!isNaN(thisNumber)) result += thisNumber; } } finally { return result; } } var final = 0 var howManyCols = document.querySelector("tbody").rows[0].cells.length for(var j = 0; j < howManyCols; j ++) { final = computeTableColumnTotal(j) } console.log(final) document.getElementById('toe').innerHTML += '<tr><td>' + final;
·
Santiago Trujillo
2 answers
Answer question0
Debe poner el total de cada columna en la celda correspondiente en la última fila.
var final = 0 var tbody = document.querySelector("tbody"); var howManyCols = tbody.rows[0].cells.length; var totalRow = tbody.rows[tbody.rows.length - 1]; for (var j = 1; j < howManyCols; j++) { final = computeTableColumnTotal(j); totalRow.cells[j].innerText = final; } function computeTableColumnTotal(colNumber) { var result = 0; try { var tableBody = document.querySelector("tbody"); var howManyRows = tableBody.rows.length; for (var i = 1; i < (howManyRows - 1); i++) { var thisNumber = parseInt(tableBody.rows[i].cells[colNumber].childNodes.item(0).data); if (!isNaN(thisNumber)) result += thisNumber; } } finally { return result; } } <table> <tbody> <tr> <td></td> <th scope="col">2013</th> <th scope="col">2014</th> <th scope="col">2015</th> <th scope="col">2016</th> </tr> <tr> <th scope="row">a</th> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <th scope="row">b</th> <td>5</td> <td>6</td> <td>4</td> <td>5</td> </tr> <tr> <th scope="row">c</th> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <th scope="row">d</th> <td>5</td> <td>6</td> <td>8</td> <td>5</td> </tr> <tr> <th scope="row">Total</th> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>
·
Santiago Trujillo
Report
0
Podría reestructurar su código de esta manera para iterar sobre el total de celdas, asegurándose de que se sume la columna adecuada para cada una.
function getColumnValues(table, column) { const body = table.getElementsByTagName("tbody")[0]; const rows = [...body.getElementsByTagName("tr")]; const contents = rows.map(row => row.getElementsByTagName("td")[column].textContent); return contents.filter(c => !isNaN(c)).map(c => Number(c)); } const sum = arr => arr.reduce((a, b) => a + b, 0); const table = document.getElementsByTagName("table")[0]; const totals = [...table.getElementsByTagName("tfoot")[0].getElementsByTagName("td")]; for (const [i, cell] of totals.entries()) { cell.innerHTML = sum(getColumnValues(table, i)); } <table><thead> <tr><td></td><th scope="col">2013</th><th scope="col">2014</th><th scope="col">2015</th><th scope="col">2016</th></tr></thead> <tbody> <tr><th scope="row">a</th><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><th scope="row">b</th><td>5</td><td>6</td><td>4</td><td>5</td></tr> <tr><th scope="row">c</th><td>4</td><td>5</td><td>6</td><td>7</td></tr> <tr><th scope="row">d</th><td>5</td><td>6</td><td>8</td><td>5</td></tr> </tbody> <tfoot><tr><th scope="row">Total</th><td></td><td></td><td></td><td></td></tr> </tfoot> </table>
·
Santiago Trujillo
Report
Answer question