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.
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.