-
-
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> |
Here is a http://jsfiddle.net/uXgK9/ version still working good
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?
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.
Jimbob's version is much nicer.. i am going to hide my cruft and show his.. hah