带输入的JQuery表格：总列和行

Question

我没有找到任何解决方案在表中动态计算INPUT每个行和每列的总和和所有输入的总和在同一时间。 我有这个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> 

和JQuery

$(document).ready(function(){ 
    $(".saisie").each(function() { 
     $(this).keyup(function(){ 
      calculateSum(); 
     }); 
    }); 

for (i=0;i<$('#sum_table tr:eq(0) td').length;i++) { 
    var total = 0; 
    $('.saisie:eq(' + i + ')', '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 only if the value is number 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     } 
    }); 
    $("#sum").html(sum.toFixed(2)); 
} 

所以全球总和的作品，但对于所有colums等所有行的总和。我不知道。

任何想法？帮帮我？

Answer 1

请尝试以下代码：使用参数index添加calculateTotal函数。通过传递input的父亲td的索引来调用此函数。现在计算所有td与相同索引的总和，并把它放在同一索引的总数td中。请致电calculateSum从calculateTotal函数。

注 - 我已经修改calculateSum功能，以避免不必要的长的for循环（从total计数td只）

$(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

注 - 我已删除第一td从最后一行使列对齐。