title: How to update cells in the HTML Table row when change one column?
body: <p>I have HTML Table on my page that's build dynamically. I make some of the cell editable. Also one cell contains calculated value based on two other cells in the same row. Here is the part of my table:</p>
  
  <pre><code>&lt;tr class="mattersRow"&gt;
      &lt;td class="editableCell hours"&gt;0.50&lt;/td&gt;
      &lt;td class="editableCell rate"&gt;170&lt;/td&gt;
      &lt;td class="editableCell amount"&gt;85.00&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>In jQuery I make my cells editable on double click:</p>
  
  <pre><code>        $('.editableCell').dblclick(function (e) {
  
              if ($(this).find('input').length) {
                  return;
              }
              var input = $("&lt;input type='text' class='form-control' /&gt;")
                                .val($(this).text());
  
              $(this).empty().append(input);
  
              $(this).find('input')
                     .focus()
                     .blur(function (e) {
                         $(this).parent('td').text(
                            $(this).val()
                         );
                     });
  </code></pre>
  
  <p>In term of trigger change event I extend var() method</p>
  
  <pre><code>$(function () {
              // Extending the val method so that the change event is triggered when value is changed using the val function.
              // caching the val function.
              var $valFn = $.fn.val;
              $.fn.extend({
                  val: function () {
                      // Our custom val function calls the original val and then triggers the change event.
                      var valCatch = $valFn.apply(this, arguments);
                      if (arguments.length) {
                          $(this).change();
                      }
                      return valCatch;
                  }
              });
          });
  </code></pre>
  
  <p>Now I trigger this event when value has change:</p>
  
  <pre><code>input.change(function () {
         $(this).closest('.amount').val($(this).closest('.hours').val() * $(this).parents('.rate').val()); 
  // This is I can't get value of hours and rate cells...             
  });
  </code></pre>
  
  <p>How to get value of rate and hours cells, calculate and put in amount cell?</p>