How to dynamically sum all columns for HTML table using JS

Issue

enter image description here

I am new to JS. I have been trying to sum each column dynamically so that as there is a new year it will auto sum the column. So far I can only get it to work for 1 column at a time. Any help is greatly appreciated.

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;

Solution

You need to put the total for each column in the corresponding cell in the last row.

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>

Answered By – Barmar

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.