Question

我有一个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
对于每一行，用户可以为评级选择“高”或“中等”。然后我需要计算评级=“高”的所有行的“每周平均小时数”和评级=“中等”的所有行的总和。

今天我花了很多时间来完成我最后剩余的毛发试图使用jQuery工作，我是新手。我在下面设置了一个jsfiddle：

http://jsfiddle.net/tZPDr/

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

非常感谢，史蒂夫

Answer 1

做了一些调整，查看this fiddle。休息你应该能够搞清楚。：）

Answer 2

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

示例：

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

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

示例：

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

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

2 个答案: