Question

我找不到任何可以在TABLE中动态计算的解决方案，其中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));
}

所以全局Sum工作，但是所有colums和所有行的总和。我不知道。

有什么想法吗？帮助

Answer 1

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

注意 - 我修改了calculateSum函数以避免不必要的long for循环（仅从td计算total）

$(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以进行列对齐。

带有INPUT的JQuery表：Sum Columns和Rows

1 个答案: