Question

I have table like below :

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

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

At the end of the calculation, I want to sum whole total fields and put the Grand Total field.

I tried like below which is always returning NaN but when I checked the value by typeof returning number!!! :

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

Answer 1

There are several errors here, including using text() on an input field, and using parent() instead of closest("tr").

I’ve also added classes to your elements to make the selectors easier. Try this:

$('.qty, .unit').change(function(){  
   var total = 0;
   var $row = $(this).closest("tr");  
   var qty = parseFloat($row.find('.qty').val());  
   var price = parseFloat($row.find(".unit").val());
   total = parseFloat(qty * price);  
   $row.find('.total').val(parseFloat(qty * price));  
})  

Example fiddle

---

UPDATE

Added blank default to selects:

$('.qty, .unit').change(function(){  
    var total = 0;
    var $row = $(this).closest("tr");  
    var qty = parseFloat($row.find('.qty').val());  
    var price = parseFloat($row.find(".unit").val());
    total = qty * price;  

    if (isNaN(total)) {
        $row.find('.total').val("");  
    }
    else {
        $row.find('.total').val(total);  
    }
})  

Fiddle