<!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>