<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现多个输入框输入时数值自动相加</title>
</head>
<body>
<table id="table-fund">
<caption class="table-caption-legend">
(单位：万元)</caption>
<thead>
<tr>
<th colspan="3">经费到位情况</th>
</tr>
<tr>
<th>科目</th>
<th>预算数</th>
</tr>
</thead>
<tr>
<td>1.省科技经费</td>
<td>
<input id="SouProSciTech" type="text" />
</td>
</tr>
<tr>
<td>2.单位自筹</td>
<td>
<input id="SouUnitSelfFinanc" type="text" />
</td>
</tr>
<tr>
<td>3.银行贷款</td>
<td>
<input id="SouBankloans" type="text" />
</td>
</tr>
<tr>
<td>
<span class="totall">合</span><span class="totall">计</span>
</td>
<td>
<input id="TotalSou" readonly="readonly" type="text" />
</td>
</tr>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
// 1 为每个input绑定事件
// 实现在单元格值发生变化时，合计行的单元格的值自行发生变化，采用.each()遍历input并为其绑定函数keyup
// 在keyup事件发生时进行合计。
// 这里遍历除统计单元格之外的每个input，以下代码遍历第二列的输入框，在:not()中排除合计单元格的input。
// 在input的keyup触发时调用合计方法。
$("#table-fund tr").each(function () {
$(this).find("td:eq(1) input:not(#TotalSou)").keyup(function () {
totalSouFund();//调用合计方法
});
});
// 2 实现合计
// (1)totalSou用来存储合计值，在每次调用该函数时把totalSou置0，然后遍历每个单元格中的值进行累加；
function totalSouFund() {
totalSou = 0;
$("#table-fund tr").each(function () {
$(this).find("td:eq(1) input:not(#TotalSou)").each(function () {
totalSou += getNumValue($(this)) ;
$("#TotalSou").val(Number(totalSou.toFixed(4)));
});
});
}
// (2) getNumValue()用来获取文本框的值，返回float；
function getNumValue(controlid) {
var num = controlid.val();
if (validateInput(num)) {
num = parseFloat(num);
}
else {
controlid.val("");
num = 0;
}
return num;
}
// 3 validateInput() 返回一个Bool值用来验证输入的值是否有效，确保getNumValue返回一个有效数值
function validateInput(inputstr) {
flag = false;
if (inputstr != "") {
if (isNaN(inputstr)) {
flag = false; //如果输入字符不是数字
}
else {//输入数字但是小于0
if (parseFloat(inputstr) < 0)
flag = false;
else
flag = true;
}
}
return flag;
}
// 4 处理javaScript中浮点数计算的出现的问题
$("#TotalSou").val(Number(totalSou.toFixed(4)));
</script>
</body>
</html>
