【发布时间】:2011-11-20 12:44:47
【问题描述】:
我有以下 jQuery 代码来查找所有表行的总和,现在它在 keyup 上找到总和。我希望已经计算出总和。我希望有一个隐藏字段,例如带有值的输入,因此会自动计算总和。
现在有一个输入,用户写了一些数字,然后他得到了总和,我试图自动得到总和。该数字已经在表格中,用户不会写任何东西。
HTML:
<table width="300px" border="1" style="border-collapse: collapse; background-color: #E8DCFF">
<tr>
<td width="40px">1</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>2</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>3</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr id="summation">
<td colspan ="2" align="right">
Sum :
</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
jQuery:
$(document).ready(function() {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0){
$(this).css("background-color", "red");
}
});
$("#sum").html(sum.toFixed(2));
}
【问题讨论】:
标签: javascript jquery