title: add sum of the a table with multiple header
body: <p>I have drupal view that generate one table split to multiple table thead and tbody, I need to sum the total of the columns and rows per tbody and not for all the table  </p>
  
  <p>I have this code, see code <a href="http://www.jsfiddle.net/sbirendorf/hh5d8xrd/2/" rel="nofollow">here</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id="sum_table" width="300" border="1"&gt;
       &lt;thead&gt; 
      &lt;tr class="titlerow"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;A&lt;/td&gt;
              &lt;td&gt;B&lt;/td&gt;
              &lt;td&gt;C&lt;/td&gt;
              &lt;td&gt;D&lt;/td&gt;
              &lt;td&gt;Total By Row&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt; 
           &lt;tbody&gt; 
          &lt;tr&gt;
              &lt;td&gt; Row1&lt;/td&gt;
              &lt;td class="rowAA"&gt;1&lt;/td&gt;
              &lt;td class="rowAA"&gt;2&lt;/td&gt;
              &lt;td class="rowBB"&gt;3&lt;/td&gt;
              &lt;td class="rowBB"&gt;4&lt;/td&gt;
              &lt;td class="totalRow"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; Row2&lt;/td&gt;
              &lt;td class="rowAA"&gt;1&lt;/td&gt;
              &lt;td class="rowAA"&gt;2&lt;/td&gt;
              &lt;td class="rowBB"&gt;3&lt;/td&gt;
              &lt;td class="rowBB"&gt;4&lt;/td&gt;
              &lt;td class="totalRow"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="totalColumn"&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  
       &lt;thead&gt; 
      &lt;tr class="titlerow"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;AA&lt;/td&gt;
              &lt;td&gt;BB&lt;/td&gt;
              &lt;td&gt;CC&lt;/td&gt;
              &lt;td&gt;DD&lt;/td&gt;
              &lt;td&gt;Total By Row&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt; 
           &lt;tbody&gt; 
          &lt;tr&gt;
              &lt;td&gt; Row1&lt;/td&gt;
              &lt;td class="rowAA"&gt;11&lt;/td&gt;
              &lt;td class="rowAA"&gt;22&lt;/td&gt;
              &lt;td class="rowBB"&gt;33&lt;/td&gt;
              &lt;td class="rowBB"&gt;44&lt;/td&gt;
              &lt;td class="totalRow"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; Row2&lt;/td&gt;
              &lt;td class="rowAA"&gt;11&lt;/td&gt;
              &lt;td class="rowAA"&gt;22&lt;/td&gt;
              &lt;td class="rowBB"&gt;33&lt;/td&gt;
              &lt;td class="rowBB"&gt;44&lt;/td&gt;
              &lt;td class="totalRow"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="totalColumn"&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  
       &lt;thead&gt; 
      &lt;tr class="titlerow"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;AAA&lt;/td&gt;
              &lt;td&gt;BBB&lt;/td&gt;
              &lt;td&gt;CCC&lt;/td&gt;
              &lt;td&gt;DDD&lt;/td&gt;
              &lt;td&gt;Total By Row&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt; 
           &lt;tbody&gt; 
          &lt;tr&gt;
              &lt;td&gt; Row1&lt;/td&gt;
              &lt;td class="rowAA"&gt;111&lt;/td&gt;
              &lt;td class="rowAA"&gt;222&lt;/td&gt;
              &lt;td class="rowBB"&gt;333&lt;/td&gt;
              &lt;td class="rowBB"&gt;444&lt;/td&gt;
              &lt;td class="totalRow"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; Row2&lt;/td&gt;
              &lt;td class="rowAA"&gt;111&lt;/td&gt;
              &lt;td class="rowAA"&gt;222&lt;/td&gt;
              &lt;td class="rowBB"&gt;333&lt;/td&gt;
              &lt;td class="rowBB"&gt;444&lt;/td&gt;
              &lt;td class="totalRow"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="totalColumn"&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
              &lt;td class="totalCol"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#sum_table {
   white-space: nowrap;   
  }
  #sum_table td {
   padding: 5px 10px;   
  }
  </code></pre>
  
  <p><strong>JavaScript in onLoad</strong></p>
  
  <pre><code>$("#sum_table tr:not(:first,:last)  td:last-child").text(function(){
      var t = 0;
      $(this).prevAll().each(function(){ 
          t += parseInt( $(this).text(), 10 ) || 0;
      });
      return t;
  });
  
  $("#sum_table tr:last td:not(:first,:last)").text(function(i){
      var t = 0;
      $(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
          t += parseInt( $(this).text(), 10 ) || 0;
      });
      return "Total: " + t;
  });
  </code></pre>
  
  <p>How can I sum total after every category?<br>
  Thanks a lot  </p>