Calculate table rows and populate the grand total field
<p>I have table like below :</p>



<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;th&gt;Product Type&lt;/th&gt;
    &lt;th&gt;Quantity&lt;/th&gt;
    &lt;th&gt;Unit&lt;/th&gt;
    &lt;th&gt;Total&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tr&gt;
     &lt;td&gt;Gas&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="qty" /&gt;&lt;/td&gt;
     &lt;td&gt;
        &lt;select id="unit" name="unit"&gt;
           &lt;option value="30.42"&gt;Liter&lt;/option&gt;
           &lt;option value="25.30"&gt;Ton&lt;/option&gt;
           &lt;option value="45.10"&gt;Kg&lt;/option&gt;
     &lt;/td&gt;
     &lt;td&gt;&lt;input type="text" readonly="readonly" name="total" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;Diesel&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="qty" /&gt;&lt;/td&gt;
     &lt;td&gt;
        &lt;select id="unit" name="unit"&gt;
           &lt;option value="20.42"&gt;Liter&lt;/option&gt;
           &lt;option value="18.30"&gt;Ton&lt;/option&gt;
           &lt;option value="25.10"&gt;Kg&lt;/option&gt;
     &lt;/td&gt;
     &lt;td&gt;&lt;input type="text" readonly="readonly" name="total" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;Fuel&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" name="qty" /&gt;&lt;/td&gt;
     &lt;td&gt;
        &lt;select id="unit" name="unit"&gt;
           &lt;option value="30.42"&gt;Liter&lt;/option&gt;
           &lt;option value="25.30"&gt;Ton&lt;/option&gt;
           &lt;option value="45.10"&gt;Kg&lt;/option&gt;
     &lt;/td&gt;
     &lt;td&gt;&lt;input type="text" readonly="readonly" name="total" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
</code></pre>

<p>I would like to calculate ( qty * unit ) each row based <code>qty</code> and <code>unit</code> and put the result <code>total</code> column.</p>

<p>At the end of the calculation, I want to <code>sum</code> whole <code>total</code> fields and put the Grand Total field.</p>

<p>I tried like below which is always returning <code>NaN</code> but when I checked the value by <code>typeof</code> returning <code>number</code>!!! :</p>



<pre><code>$(document).ready(function() {  
$('input[name^=qty], select[name^=unit]').change(function(){  
   var total = 0;
   var $row = $(this).parent();  
   var qty = parseFloat($row.find('input[name=qty]').val());  
   var price = parseFloat($row.find("select[name='unit'] option:selected").val());
   total = parseFloat(qty * price);  
   $row.find('.amount').text(parseFloat(qty * price));  
})  
});   
</code></pre>
