Question

我想使用jquery计算每列的总和。 HTML：

<table id="tab"width="300px" border="1" >
<tbody><tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt"></td>
        <td><input class="txt" type="text" name="txt"></td>
</tr>
<tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt"></td>
         <td><input class="txt" type="text" name="txt"></td>
</tr>
<tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt"></td>
         <td><input class="txt" type="text" name="txt"></td>
</tr>
<tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt"></td>
         <td><input class="txt" type="text" name="txt"></td>
</tr>

<tr id="summation">

    <td colspan="2"align="right">Sum :</td>
    <td><input class="sum" type="text" name="txt"></td>
        <td><input class="sum" type="text" name="txt"></td>
</tr>
     </tbody></table>

这里我想添加每列的值（使用keyup函数）并显示在最后一行。

小提琴： http://jsfiddle.net/5tgbxy31/2/

Answer 1

更改

$("#sum").html(sum.toFixed(2));

到

$("#sum").val(sum.toFixed(2));

因为如果我们想填充输入，jquery的val()不是html()。 html()用于跨度。

在if {）中再添加一个&& this.id!="sum"条件，因此它不会在计算中取总和值。好

Answer 2

使用.val()代替.html()输入，并尝试以下代码

var sum = 0;
$("#tab input").keyup(function(){
    sum += parseFloat(this.value);
    $("#sum").val(sum.toFixed(2));
});

Fiddle

Answer 3

撰写.val()代替.html()，并在代码中进行一些细微更改：

$(document).ready(function()
                  {
                      $("#tab").find("input").each(function(){
                          $(this).keyup(function(){
                              //alert("here")
                              calculateSum();
                          });
                      });
                  });
function calculateSum()
{
    var sum=0;
    $("#tab tr").not("tr:last").each(function(){
      $(this).find('input[type="text"]').each(function()  {
        if(!isNaN(this.value)&&this.value.length!=0)
        {
          sum+=parseInt(this.value);
        }
      });      
    });  
    $("#sum").val(sum.toFixed(2));    
}

DEMO

使用keyup事件求和字段值

3 个答案: