-
-
Save nikolajbaer/778800 to your computer and use it in GitHub Desktop.
| <html><head> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| function tally (selector) { | |
| $(selector).each(function () { | |
| var total = 0, | |
| column = $(this).siblings(selector).andSelf().index(this); | |
| $(this).parents().prevUntil(':has(' + selector + ')').each(function () { | |
| total += parseFloat($('td.sum:eq(' + column + ')', this).html()) || 0; | |
| }) | |
| $(this).html(total); | |
| }); | |
| } | |
| tally('td.subtotal'); | |
| tally('td.total'); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <table id="data"> | |
| <tr><th>Name</th><th>Age</th><th>Weight</th></tr> | |
| <tr><td>Joe</td><td>30</td><td class="sum">175</td><td class="sum">1</td></tr> | |
| <tr><td>Jack</td><td>29</td><td class="sum">165</td><td class="sum">1</td></tr> | |
| <tr><td>Jim</td><td>31</td><td class="sum">178</td><td class="sum">1</td></tr> | |
| <tr><td>Jeff</td><td>28</td><td class="sum">173</td><td class="sum">1</td></tr> | |
| <tr><th colspan="2" align="right">Sum</th><td class="subtotal"></td><td class="subtotal"></td></tr> | |
| <tr><td>Jane</td><td>30</td><td class="sum">120</td><td class="sum">2</td></tr> | |
| <tr><td>Jackie</td><td>30</td><td class="sum">112</td><td class="sum">2</td></tr> | |
| <tr><th colspan="2" align="right">Sum</th><td class="subtotal"></td><td class="subtotal"></td></tr> | |
| <tr><th colspan="2" align="right">Total</th><td class="total"></td><td class="total"></td></tr> | |
| </table> | |
| </body> | |
| </html> |
Nikolajbaer, Too Cool! Thanks for posting.
This is by far the smallest and easiest script to implement, in order to get subtotals and totals on a html table, that I have come across. I was able to combine this function with a function that dynamically creates html tables based on a feed that returns JSON. Now no matter how many columns are in a JSON feed, I can dynamically create a table with totals for each column.
Hello skrantzman,
Please could you share?
Hello skrantzman,
Please could you share?
ifeanyiokoye,
First I use a Javascript function to dynamically create my html tables from JSON data. I then combine that with functions to dynamically create table headings and add data to rows, based on the results of my JSON feed. Then I wrap it all up by adding the above function to subtotal the results in the footer of the table. Lastly, I use the DataTable jQuery plugin to add functionality to the tables.
Here is a working script from one of my sites: https://github.com/skrantzman/Dynamic-HTML-Tables-With-Subtotals, and an explanation of the page it is used on, which may be helpful in understanding the code.
Steve
Edited on 1/22/2020: After completing the writeup on github, I realized that how I was accomplishing this through code was different than I originally posted, so I edited for clarification. Read the full writeup on github.
This code worked a treat on my page, but the
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script
call breaks the calendar pop-up in my forms.
Anyone know why that might be?