title: Calculate table rows and populate the grand total field
body: <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>