Javad Memariani Javad Memariani - 2 months ago 11
Javascript Question

Sum total for each column not based on a class in jQuery

I'm using jQuery to sum each column without using of any class name, and just iterate each column and sum the column and print the result in the footer as 'sum' class. The problem, it's not working as I expected and it give wrong result.
Demo

function sum_column(columnIndex) {
var tot = 0,
value = 0;
$('#dataTable').find('tr').children('td:nth-child(' + columnIndex + ')').each(function() {
if ($(this).text() != '' && !$(this).hasClass('sum') && !$(this).hasClass('head')) {
value = parseInt($.trim($(this).text()));
if (!isNaN(value)) {
tot += value;
}
}
});
return tot;
}

$(document).ready(function() {
$('#dataTable').find('td.sum').each(function(i) {
$(this).text(sum_column(i + 3));
});
});

Answer

Your <tr>'s with rowspan for the category have 8 <td> whereas the <tr>'s that do not have a rowspan have only 7. Therefore your indexing is getting off by 1 column for the 2nd and 3rd rows for each category. Here's how you can fix it:

Notice that I also added a <thead> and <tfoot> to your <table> so that you can simplify your javascript.

function sum_column(columnIndex) {
  var tot = 0,
    value = 0;
  $('#dataTable tbody').find('tr').each(function() {
    $(this).children('td:not([rowspan])').eq(columnIndex - 1).each(function() {
      if ($(this).text() != '') {
        value = parseInt($(this).text().trim());
        if (!isNaN(value)) {
          tot += value;
        }
      }
    });
  });
  return tot;
}

$(document).ready(function() {
  $('#dataTable tfoot').find('td').each(function(i) {
    if (i > 1) {
      $(this).text(sum_column(i));

    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="dataTable">
  <thead>
    <tr>
      <th class="head" dir="rtl" style="height: 35px; background-color: #F0F0F0;">Category</th>
      <td class="head" style="height: 35px; background-color: #F0F0F0;">Sub</td>
      <td class="head" style="height: 35px; background-color: #F0F0F0;">Column 1</td>
      <td class="head" style="height: 35px; background-color: #F0F0F0;">Column 2</td>
      <td class="head" style="height: 35px; background-color: #F0F0F0;">Column 3</td>
      <td class="head" style="height: 35px; background-color: #F0F0F0;">Column 4</td>
      <td class="head" style="height: 35px; background-color: #F0F0F0;">Column 5</td>
      <td class="head" style="height: 35px; background-color: #F0F0F0;">Column 6</td>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td rowspan="3">Category 1</td>
      <td>One</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>

    <tr>
      <td rowspan="3">Category 2</td>
      <td>One</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>

    <tr>
      <td rowspan="3">Category 3</td>
      <td>One</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>

    <tr>
      <td rowspan="3">Category 4</td>
      <td>One</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>

    <tr>
      <td rowspan="3">Category 5</td>
      <td>One</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td rowspan="3">Category 6</td>
      <td>One</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="sum">15</td>
      <td class="sum">15</td>
      <td class="sum">15</td>
      <td class="sum">9</td>
      <td class="sum">6</td>
      <td class="sum">2</td>
    </tr>
  </tfoot>
</table>