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); 
    }); 
}); 

希望它適合你