jQuery table sum change keyup（）？

Question

我有以下用于查找所有表行总和的jQuery代码，现在它可以找到keyup上的总和。我想这笔款项已经计算好了。我想有一个隐藏的字段，像一个带有值的输入，所以总和是自动计算的。

现在有一个输入，用户写入一些数字，他得到的总和，我试图自动得到的总和。数字已经在表格中，用户不会写任何东西。

HTML：

<table width="300px" border="1" style="border-collapse: collapse; background-color: #E8DCFF"> 
     <tr> 
      <td width="40px">1</td> 
      <td>Number</td> 
      <td><input class="txt" type="text" name="txt" /></td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Number</td> 
      <td><input class="txt" type="text" name="txt" /></td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Number</td> 
      <td><input class="txt" type="text" name="txt" /></td> 
     </tr> 
     <tr id="summation"> 
      <td colspan ="2" align="right"> 
       Sum : 
      </td> 
      <td align="center"><span id="sum">0</span></td> 
     </tr> 
</table> 

的jQuery：

$(document).ready(function() { 
    //iterate through each textboxes and add keyup 
    //handler to trigger sum event 
    $(".txt").each(function() { 
     $(this).keyup(function() { 
      calculateSum(); 
     }); 
    }); 
}); 
function calculateSum() { 
    var sum = 0; 
    //iterate through each textboxes and add the values 
    $(".txt").each(function() { 
     //add only if the value is number 
     if (!isNaN(this.value) && this.value.length != 0) { 
      sum += parseFloat(this.value); 
      $(this).css("background-color", "#FEFFB0"); 
     } 
     else if (this.value.length != 0){ 
      $(this).css("background-color", "red"); 
     } 
    }); 
    $("#sum").html(sum.toFixed(2)); 
} 

Answer 1

如果我理解正确，您确实希望在用户写入输入值时总结更改。这可以通过改变你的准备函数实现这一目标：

$(document).ready(function() { 
    //this calculates values automatically 
    calculateSum(); 

    $(".txt").live("keydown keyup", function() { 
     calculateSum(); 
    }); 
}); 

Demo

Answer 2

如果数字已经在输入字段用户输入任何东西之前，你可以找到的总和：

 
$(document).ready(function() { 
    //iterate through each textboxes and add keyup 
    //handler to trigger sum event 
    var sum = 0; 
    $(".txt").each(function() { 
     sum += parseFloat($(this).val()); 
     $("#sum").val(""); 
     $("#sum").val(sum); 
    }); 
}); 

希望它适合你