Perform Dynamic Table Calculations in HTML - jQuery?
<p>I have an HTML table which allows the user to enter some values, either directly or from a select menu. </p>

<pre><code>&lt;form action="" method=""&gt;
&lt;table id="scores" width="358" border="1"&gt;
&lt;tr&gt;
&lt;th colspan="5"&gt;Activities&lt;/th&gt;
&lt;/tr&gt;
&lt;tr class="header"&gt;
&lt;td width="104"&gt;Activity&lt;/td&gt;
&lt;td width="163"&gt;Rating&lt;/td&gt;
&lt;td width="69"&gt;Hours Per Week&lt;/td&gt;
&lt;td width="163"&gt;Weeks Per Year&lt;/td&gt;
&lt;td width="163"&gt;Average Hours Per Week&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="title"&gt;&lt;input type="text" value=""/&gt;&lt;/td&gt;
&lt;td&gt;&lt;select name="rating"&gt;
&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="High"&gt;High&lt;/option&gt;
  &lt;option value="Moderate"&gt;Moderate&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;
&lt;td class="title"&gt;&lt;input type="text" value=""/&gt;&lt;/td&gt;
&lt;td class="title"&gt;&lt;input type="text" value=""/&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="title"&gt;&lt;input type="text" value=""/&gt;&lt;/td&gt;
&lt;td&gt;&lt;select name="rating"&gt;
&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="High"&gt;High&lt;/option&gt;
  &lt;option value="Moderate"&gt;Moderate&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;
&lt;td class="title"&gt;&lt;input type="text" value=""/&gt;&lt;/td&gt;
&lt;td class="title"&gt;&lt;input type="text" value=""/&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="title"&gt;Total High&lt;/td&gt;
&lt;td class="title" id="totalHigh"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="title"&gt;Total Moderate&lt;/td&gt;
&lt;td class="title" id="totalModerate"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="5"&gt;&lt;button class="copy"  value="Set Value"&gt;Submit&lt;/button&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>I need to perform a couple of calculations as follows:</p>

<ol>
<li><p>for each row I need to calculate the "Average Hours Per Week" which is simply the (Hours Per Week * Weeks Per Year)/52</p></li>
<li><p>for each row the user can select either "High" or "Moderate" for the Rating. I need to then calculate the total of the "Average Hours Per Week" for all rows where Rating = "High" and all rows where Rating = "Moderate".</p></li>
</ol>

<p>I've spent the better part of today pulling out my last remaining hairs trying to get something working using jQuery which I'm a  newbie with. I've setup a jsfiddle at:</p>

<p><a href="http://jsfiddle.net/tZPDr/" rel="nofollow">http://jsfiddle.net/tZPDr/</a></p>

<p>which has a simplified version of the table. Would greatly appreciate any help about how to go about performing these 2 calculations dynamically as the user types.</p>

<p>Many thanks,
Steve</p>
