Summe für jede Spalte, die nicht auf einer Klasse in jQuery basiert

Question

Ich verwende jQuery, um jede Spalte ohne Verwendung eines Klassennamens zu summieren, und iteriere einfach jede Spalte und summiere die Spalte und drucke das Ergebnis in der Fußzeile als 'Summe "Klasse. Das Problem, es funktioniert nicht so wie ich es erwartet habe und es gibt ein falsches Ergebnis. 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

Ihre <tr> 's mit rowspan für die Kategorie haben 8 <td> während die <tr> ist die 7. haben nicht nur eine rowspan haben daher Ihre Indizierung um 1 Spalte für die 2. und 3. aussteigen Zeilen für jede Kategorie. Hier ist, wie man es beheben:

Beachten Sie, dass ich auch eine <thead> und <tfoot> zu Ihrem <table> hinzugefügt, so dass Sie Ihr Javascript vereinfachen kann.

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>