在 HTML 中执行动态表计算 - jQuery？答案

【问题标题】：Perform Dynamic Table Calculations in HTML - jQuery?在 HTML 中执行动态表计算 - jQuery？
【发布时间】：2012-04-30 07:25:59
【问题描述】：

我有一个 HTML 表格，它允许用户直接或从选择菜单输入一些值。

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

我需要执行如下几个计算：

对于每一行，我需要计算“每周平均小时数”，即（每周小时数 * 每年周数）/52
对于每一行，用户可以选择“高”或“中等”作为评级。然后，我需要计算 Rating = "High" 的所有行和 Rating = "Moderate" 的所有行的 "Average Hours Per Week" 总数。

我今天大部分时间都在拔出我最后剩下的头发，试图使用我是新手的 jQuery 来做一些事情。我在以下位置设置了一个 jsfiddle：

http://jsfiddle.net/tZPDr/

其中有一个简化版的表格。非常感谢任何有关如何在用户键入时动态执行这两个计算的帮助。

非常感谢，史蒂夫

【问题讨论】：

这似乎并不难，但你能布置一个演示吗？那就是输入，输出应该去哪里？（如果您可以使用预填充字段更新您的 JS Fiddle 以显示输入/输出，那就太棒了。对不起，如果我没有看到明显的东西 =/）
谢谢大卫，我已经用一些示例数据和计算结果更新了 JS Fiddle：jsfiddle.net/tZPDr/3 可以有多个行 - 行数不固定。我还需要将其四舍五入到小数点后 1 位。如果您需要任何进一步的说明，请告诉我。

标签： javascript jquery

【解决方案1】：

做了一些调整，查看this fiddle。休息一下，你应该能够弄清楚。 :)

【讨论】：

【解决方案2】：

如果您想作为用户类型执行此操作，则需要绑定到 keypress 或 keydown。

例子：

$('td.hours input').on('keypress', function() {
   //get  the values and calculate
});

然后选择您的字段并执行计算。你可以得到这样的值

例子：

var hrs = $('td.hours input').val();

【讨论】：