Auto calculate input field in jquery

Calculate auto input fields in this example. When we input some value
that value will calculate and it show result. This will also example for
javascript/jQuery calculator.

<table width="250px" border="1" style="border-collapse:collapse;">  
   <tr>  
     <td>Mango</td>  
     <td><input class="calculator" type="text" name="txt"/></td>  
   </tr>  
   <tr>  
     <td>Apple</td>  
     <td><input class="calculator" type="text" name="txt"/></td>  
   </tr>  
   <tr>  
     <td>Orange</td>  
     <td><input class="calculator" type="text" name="txt"/></td>  
   </tr>  
   <tr>  
     <td>Olive</td>  
     <td><input class="calculator" type="text" name="txt"/></td>  
   </tr>  
   <tr id="summation">  
     <td align="right">Sum :</td>  
     <td align="center"><span id="total">0</span></td>  
   </tr>  
 </table>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
 <script>  
   $(document).ready(function(){  
     $(".calculator").each(function() {  
       $(this).keyup(function(){  
         calculateSum();  
       });  
     });  
   });  
   function calculateSum() {  
     var sum = 0;  
     //iterate through each text field and add the values  
     $(".calculator").each(function() {  
       if(!isNaN(this.value) && this.value.length!=0) {        //check value is number  
         sum += parseFloat(this.value);  
       }  
     });  
     $("#total").html(sum.toFixed(2));  // show result  
   }  
 </script>