This time I will share jQuery Plugin and tutorial about Sum Total of Row and Column In Table – jQuery tableTotal, hope it will help you in programming stack.
| File Size: | 5.14 KB |
|---|---|
| Views Total: | 27626 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another jQuery table data calculation plugin that allows to calculate column and row sum in your html table.
How to use it:
1. Download and then include the JavaScript file ‘jquery.tableTotal.js’ after you’ve included jQuery JavaScript library.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.tableTotal.js"></script> |
2. Just call the function on the html table and the plugin will take care of the rest.
01 |
<table id="totalMe" class="table table-bordered"> |
02 |
<thead> |
03 |
<tr> |
04 |
<th></th> |
05 |
<th>Q1</th> |
06 |
<th>Q2</th> |
07 |
<th>Q3</th> |
08 |
<th>Q4</th> |
09 |
</tr> |
10 |
</thead> |
11 |
<tbody> |
12 |
<tr> |
13 |
<th>North</th> |
14 |
<td>54</td> |
15 |
<td>14</td> |
16 |
<td>91</td> |
17 |
<td>16</td> |
18 |
</tr> |
19 |
<tr> |
20 |
<th>East</th> |
21 |
<td>40</td> |
22 |
<td>7</td> |
23 |
<td>75</td> |
24 |
<td>87</td> |
25 |
</tr> |
26 |
<tr> |
27 |
<th>South</th> |
28 |
<td>24</td> |
29 |
<td>39</td> |
30 |
<td>88</td> |
31 |
<td>89</td> |
32 |
</tr> |
33 |
<tr> |
34 |
<th>West</th> |
35 |
<td>32</td> |
36 |
<td>89</td> |
37 |
<td>69</td> |
38 |
<td>75</td> |
39 |
</tr> |
40 |
</tbody> |
41 |
</table> |
1 |
$('#totalMe').tableTotal(); |
3. Enabled/disable total row/column.
1 |
$('#totalMe').tableTotal({ |
2 |
totalRow: true, |
3 |
totalCol: true, |
4 |
}); |
4. Set the font-weight of total numbers to ‘bold’.
1 |
$('#totalMe').tableTotal({ |
2 |
bold: true |
3 |
}); |
This awesome jQuery plugin is developed by travishorn. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
