jQuery table sum change keyup()?
<p>I have the following jQuery code for finding the sum of all table rows, now it finds the sum on keyup. I want the sum to be already calculated. I wanted to have a hidden field like an input with a value, so the sum is automatically calculated.</p>

<p>Now there is an input, the user writes some number and than he gets the sum, I am trying to get the sum automatically. The number is already going to be in the table the user will not write anything.</p>

<p>HTML:</p>

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

<p>jQuery:</p>

<pre><code> $(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) &amp;&amp; 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));
 }
</code></pre>
