Сумма для каждого столбца, не основанного на классе в jQuery

Question

Я использую jQuery для суммирования каждого столбца без использования какого-либо имени класса и просто перебираю каждый столбец и суммирую столбец и печатаю результат в нижнем колонтитуле как сумму ' класс. Проблема, она не работает, как я ожидал, и это дает неправильный результат. 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 1

Вашего <tr> 's с RowSpan для категории имеет 8 <td> в то время как <tr> о том, что не имеет RowSpan только 7. Поэтому ваша индексация высадки на 1 колонку для 2-го и 3-го строк для каждой категории. Вот как вы можете это исправить:

, что я также добавил <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>