Created
January 13, 2011 23:03
-
-
Save nikolajbaer/778800 to your computer and use it in GitHub Desktop.
Litttle jquery js script to create subtotals and totals for columns in a table. Essentially tag the col "td"s that you want to sum with the class sum, mark the col "td"s that you want to be subtotals with the class "subtotal", and mark the total row as cl
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.