javascript - 不基于jQuery中的类的每一列的总和

我正在使用jQuery来对每一列求和而不使用任何类名，而只是对每一列进行迭代并求和，并将结果作为“ sum”类打印在页脚中。问题是，它没有按我预期的那样工作，并且给出了错误的结果。
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));
      });
    });

最佳答案

具有类别的行跨度的<tr>有8个<td>，而没有行跨度的<tr>只有7个。因此，对于第二行和第三行，您的索引正在按1列进行排序类别。解决方法如下：

请注意，我还为<thead>添加了<tfoot>和<table>，以便您简化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>