comment les éléments de formulaire peuvent-ils être sommés séparément rangée par colonne colonne par colonne dans jquery?

Question

Je dispose à la volée de lignes de formulaire croissantes et de 3 colonnes et chaque cellule contient une zone de texte. Je veux additionner les valeurs des 2 premières colonnes aux 3èmes colonnes de chaque ligne. comment puis-je faire ça avec jquery?

me permettent de visualiser plus:

 c1 c2 s 
r1 5  6 11 
r2 7  3 10 
.  .  . . 
s sc1 sc2 sc3 

SC1, SC2, SC3 sont la somme des colonnes connexes comme vous le voyez.

Answer 1

Vous devez construire votre table comme ceci:

<table class="summonizer"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>c1</th> 
     <th>c2</th> 
     <th>s</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th>r1</th> 
     <td><input type="text" value="5"/></td> 
     <td><input type="text" value="6"/></td> 
     <td></td> 
    </tr> 
    <tr> 
     <th>r2</th> 
     <td><input type="text" value="7"/></td> 
     <td><input type="text" value="3"/></td> 
     <td></td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <th>s</th> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    </tfoot> 
</table> 

Et votre javascript devrait ressembler à ceci:

function summonize_table($table) { 
    var col_sums = []; 
    var row_sums = []; 
    var all_sum = 0; 
    $table.find('tbody tr').each(function(row){ 
    row_sums[row] = 0; 
    $(this).find('td input[type=text]').each(function(column){ 
     value = parseInt(this.value); 
     row_sums[row] += value; 
     if (!col_sums[column]) col_sums[column] = 0; 
     col_sums[column] += value; 
     all_sum += value; 
    }); 
    }); 
    $.each(row_sums,function(index,value){ 
    $table.find('tbody tr:eq('+index+') td:last').html(value); 
    }); 
    $.each(col_sums,function(index,value){ 
    $table.find('tfoot tr td:eq('+index+')').html(value); 
    }); 
    $table.find('tfoot tr td:last').html(all_sum); 
} 
$(function(){ 
    $('table.summonizer input[type=text]').live('change',function(){ 
    summonize_table($(this).closest('table')); 
    }); 
    $('table.summonizer input[type=text]:first').trigger('change'); 
}); 

Vous pouvez voir un exemple de travail ici: http://jsfiddle.net/my9DF/

Answer 2

Version rapide et approximative - pour chaque TR, convertissez le contenu de ses TDs enfants en nombres et additionnez-les, puis lorsque la somme est faite, placez un TD sur la fin avec la valeur de "sum" comme texte.

$("tr").each(function() { 
    var sum = 0; 
    $("td", $(this)).each(function() { 
     sum += Number($(this).text()); 
    }); 
    $(this).append($("<td>").text(sum)); 
});