JQuery Table with INPUT : Sum Colomns et Rows -

JQuery Table with INPUT : Sum Colomns et Rows -

i don't find anywhere solution calculate dynamically in table input sum on each rows , each column , sum of inputs in same time. i've html :

<table> <thead> <tr> <th align=center>ressource</th> <th align=center>jan. (22j)<br></th> <th align=center>fév. (20j)<br></th> <th align=center>mars (22j)<br></th> <th align=center>total:<br></th> </tr> </thead> <tbody> <tr class='alt' onmouseover="this.classname='highlight'" onmouseout="this.classname='alt'"> <td align=left>a</td> <td align=right><input class='saisie' type='text' size=4 name='1347_1'></td> <td align=right><input class='saisie' type='text' size=4 name='1347_2'></td> <td align=right><input class='saisie' type='text' size=4 name='1347_3'></td> <td align=right></td> </tr> <tr class='normal' onmouseover="this.classname='highlight'" onmouseout="this.classname='normal'"> <td align=left>b</td> <td align=right><input class='saisie' type='text' size=4 name='4482_1'></td> <td align=right><input class='saisie' type='text' size=4 name='4482_2'></td> <td align=right><input class='saisie' type='text' size=4 name='4482_3'></td> <td align=right></td> </tr> <tr class='alt' onmouseover="this.classname='highlight'" onmouseout="this.classname='alt'"> <td align=left>c</td> <td align=right><input class='saisie' type='text' size=4 name='7969_1'></td> <td align=right><input class='saisie' type='text' size=4 name='7969_2'></td> <td align=right><input class='saisie' type='text' size=4 name='7969_3'></td> <td align=right></td> </tr> <tr class="totalcolumn"> <td></td> <td class="totalcol" align=right>total:</td> <td class="totalcol" align=right></td> <td class="totalcol" align=right></td> <td class="totalcol" align=right></td> <td class="totalcol" align=right></td> </tr> </tbody> </table><span id=sum name sum></span>

and jquery

$(document).ready(function(){ $(".saisie").each(function() { $(this).keyup(function(){ calculatesum(); }); }); (i=0;i<$('#sum_table tr:eq(0) td').length;i++) { var total = 0; $('.saisie:eq(' + + ')', 'tr').each(function(i) { total = total + parsefloat($(this).text()); }); $('#sum_table tr:last td').eq(i).text(total); } }); function calculatesum() { var sum = 0; $(".saisie").each(function() { //add if value number if(!isnan(this.value) && this.value.length!=0) { sum += parsefloat(this.value); } }); $("#sum").html(sum.tofixed(2)); }

so global sum works, sum of colums et rows. don't know.

any ideas ? help ?

thx help

try below code : add together calculatetotal function parameter index. phone call function passing index of parent td of input. calculate sum td same index , set in total td of same index. phone call calculatesum calculatetotal function.

note - have modified calculatesum function avoid unecessary long loop (counting td total only)

$(document).ready(function(){ $(".saisie").each(function() { $(this).keyup(function(){ calculatetotal($(this).parent().index()); }); }); }); function calculatetotal(index) { var total = 0; $('table tr td').filter(function(){ if($(this).index()==index) { total += parsefloat($(this).find('.saisie').val())||0; } } ); $('table tr td.totalcol:eq('+index+')').html(total); calculatesum(); calculaterowsum(); } function calculatesum() { var sum = 0; $("td.totalcol").each(function() { sum += parsefloat($(this).html())||0; }); $("#sum").html(sum.tofixed(2)); } function calculaterowsum() { $('table tr:has(td):not(:last)').each(function(){ var sum = 0; $(this).find('td').each(function(){ sum += parsefloat($(this).find('.saisie').val()) || 0; }); $(this).find('td:last').html(sum); }); }

jsfiddle demo

note - have removed first td lastly row create column alignment.

jquery table input sum