Sum Total of Row and Column In Table - jQuery tableTotal

File Size: 5.14 KB
Views Total: 34568
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sum Total of Row and Column In Table - jQuery tableTotal

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.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.tableTotal.js"></script>

2. Just call the function on the html table and the plugin will take care of the rest.

<table id="totalMe" class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
      <th>Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>North</th>
      <td>54</td>
      <td>14</td>
      <td>91</td>
      <td>16</td>
    </tr>
    <tr>
      <th>East</th>
      <td>40</td>
      <td>7</td>
      <td>75</td>
      <td>87</td>
    </tr>
    <tr>
      <th>South</th>
      <td>24</td>
      <td>39</td>
      <td>88</td>
      <td>89</td>
    </tr>
    <tr>
      <th>West</th>
      <td>32</td>
      <td>89</td>
      <td>69</td>
      <td>75</td>
    </tr>
  </tbody>
</table>
$('#totalMe').tableTotal();

3. Enabled/disable total row/column.

$('#totalMe').tableTotal({
  totalRow: true,
  totalCol: true,
});

4. Set the font-weight of total numbers to 'bold'.

$('#totalMe').tableTotal({
  bold: true
});

This awesome jQuery plugin is developed by travishorn. For more Advanced Usages, please check the demo page or visit the official website.