CODEWITHSUNDEEP
javascriptjquerysum
Javad Memariani
Javad Memariani

Reputation: 85

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));
      });
    });

Upvotes: 1

Views: 268

Answers (1)

mhodges
mhodges

Reputation: 11116

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>

Upvotes: 3

Related Questions