title: Excel-like auto-updating table cells using jQuery
body: <p>I have an HTML table structure that looks something along the lines of:</p>
  
  <pre><code>PRICE       QUANTITY    TOTAL
  [5____]     [2____]     10 (TOTAL1=PRICE1*QUANTITY1)
  </code></pre>
  
  <p>The values in the price and quantity column are editable. These are HTML form fields.</p>
  
  <p>The values in the total column are not editable. Instead they are direct functions of the columns to the left.</p>
  
  <p>The HTML representation of the table is:</p>
  
  <pre><code>&lt;table id="some_id"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="price1" value="5" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="quantity1" value="2" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="readonly" name="total1" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Using jQuery I'd like to make it so that the value of "total1" always reflects the value of "price1" times "quantity1". </p>
  
  <p>Question: <b>I understand that there are numerous way to achieve this - but what would be the cleanest most concise way to do it using jQuery?</b></p>
  
  <p>Since "auto-updating/derived fields" should be  a quite common jQuery use-case I would assume that there exists some best practice method to achieve this.</p>