Categories
Tutorials

Add Autosum Functionality to your HTML Tables

Autosum a term I might have borrowed from Microsoft Excel. As part of my job involves using Excel as a data analysis tool, hence I wanted to take autosum concept and utilize it in HTML tables using JavaScript. Although. Autosum in Excel works differently than in this tutorial. Excel is much more advance which decides basically on number of cells that are selected, as it’s shown in the image above.

Preparing HTML Table for Autosum

We will need to add the following html ( click to expand the collapsed html code)

<table id="emp-salaries">
  <thead>
    <tr>
      <td>S.No</td>
      <td>Description</td>
      <td>Salaries</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.</td>
      <td>Alex</td>
      <td>500</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>Bob</td>
      <td>420</td>
    </tr>
    <tr>
      <td>3.</td>
      <td>Stuart</td>
      <td>300</td>
    </tr>
    <tr>
      <td>4.</td>
      <td>Gale</td>
      <td>333</td>
    </tr>
    <tr>
      <td>5.</td>
      <td>Rob</td>
      <td>200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Total</td>
      <td id="display-total">???</td>
    </tr>
  </tfoot>

</table>

<button onclick="getResults()">Calculate Total</button>

with minimal css just to standout the headers and footer (header and the total row).

thead,tfoot{font-weight: bold;}

 

The combination of above code will give us following result.

Auto sum tables result

Adding Interactivity

New we are at the integral part of this article The JavaScript. Just for your Information, I don’t want that coding best practices or designs patters comes in my way of pursuing this idea of autosum.

var tb = document.getElementById('emp-salaries'),
    dtotal = document.getElementById('display-total'),
    tbody,
    total = 0;
function getResults() {
........
........
} //getResults function

Let’s first go through the first four lines where we are declaring a variable to get the reference of html element that are going to be used later on in the functions and loops.

.....
  total = 0;
function getResults() {
  
  for (var i = 0; i < tb.children.length; i++) {
    var el = tb.children[i];
    console.log(tb.children[i]);
    if (tb.children[i].tagName == 'TBODY') {
      tbody = el;
      break;
    }
  }//loop to go through table childrens
.....
} // getResults function

As we have organized our html table in three sections thead, tbody, tfoot. We are interested in tbody, so as soon our loops finds tbody, it assigns current element (which is tbody html element) to tbody variable defined in the start and breaks out of the loop.

 }//loop to go through table childrens

  for (var j = 0; j < tbody.children.length; j++) {
    var el = tbody.children[j];

    for (var k = 0; k < el.children.length; k++) {
      if (k == el.children.length-1) {
        total += parseInt(el.children[k].innerText, 10); 
      }
    } //loop that generates the total
  } //loop to find last cell of a row
  
  dtotal.innerText = total;
} //getResults function

In the last bit of code, we are looping through the tbody (don’t get confused with tbody reference variable and tbody html elements, as they are same things and can be used interchangeably). The line 4, holds current row in the table body and in the subsequent loop we wanted to get the last cell or last data in this row (which normally contains numerical value).

In line 8, an addition assignment operator is used which will take the value of current item and assign it to the result of total variable (using parseInt is important, because everything that is displayed via html is considered string, and for calculation we need numerical values). Finally in line 13, we are replacing ??? with actual result. You can dabble with following resultant codepen embed.

See the Pen Add Autosum Functionality to your HTML Tables by Samiullah Khan (@samiullah1989) on CodePen.6143

Conclusion

I hope you have learned enough from this post. Always love to hear your input. Stay tuned for more stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.