js綜合應用：表格的四則運算 · JavaScript 學習

在做調查問卷的過程中，遇到一個表格的統計問題，算是需要些js方面的綜合知識，所以記錄下來。在上次完成了基本的求和的基礎上，添加了基本的加減乘除四則運算。基本需求簡化后如下： ![](https://box.kancloud.cn/2016-02-18_56c556cc1cfa5.jpg) 對應的htm了為： ~~~ <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> </title> <script src="jquery-1.8.0.min.js" type="text/javascript"></script> <link href="Survey.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { }) </script> <body> <div class="tablebox"> <ul> <li> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan=""> </td> <td class="tdcol"> 政府財政</td>  <td class="tdcol"> 單位自籌</td> <td class="tdcol"> 其他資金</td> <td class="tdcol"> 合計</td> </tr> <tr> <td class="tdright width20" rowspan="1">相加求和</td> <td class="tdleft"> <input name="text_1" type="text" id="text_1" class="width110 digital" /></td> <td class="tdleft"> <input name="text_2" type="text" id="text_2" class="width110 digital" /></td> <td class="tdleft"> 金額：<input name="text_3" type="text" id="text_3" class="width90 digital" /> 來源：<input type="text" name="text_4" id="text_4" class="width90" /></td> <td class="tdleft"> <input type="text" class="width110" id='82row1' disabled="disabled" /> </td> </tr> </table> <br/> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan="1"> </td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 產品數量</td> <td class="tdcol"> 合計</td> </tr> <tr> <td class="tdright width20" rowspan="1">相乘求和</td> <td class="tdleft"> 鋼筆 <td class="tdleft"> <input name="text_5" type="text" id="text_5" class="width110 digital" /></td> <td class="tdleft"> <input name="text_6" type="text" id="text_6" class="width90 digital" /> <td class="tdleft"> <input type="text" class="width110" id='82row2' disabled="disabled" /> </td> </tr> </table> <br/> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan="1"> </td> <td class="tdcol"> 擁有現金</td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 最多可購買數量</td> <td class="tdcol"> 剩余現金</td> </tr> <tr> <td class="tdright width20" rowspan="1">除法</td> <td class="tdleft"> <input name="text_7" type="text" id="text_7" class="width110 digital" /> <td class="tdleft"> 鋼筆 </td> <td class="tdleft"> <input name="text_8" type="text" id="text_8" class="width90 digital" /> <td class="tdleft"> <input type="text" class="width110" id='text_88' disabled="disabled" /> </td> <td class="tdleft"> <input type="text" class="width110" id='82row4' disabled="disabled" /> </td> </tr> </table> <br/> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan="1"> </td> <td class="tdcol"> 擁有現金</td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 購買數量</td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 購買數量</td> <td class="tdcol"> 剩余現金</td> </tr> <tr> <td class="tdright width20" rowspan="1">綜合</td> <td class="tdleft"> <input name="text_9" type="text" id="text_9" class="width110 digital" /> <td class="tdleft"> 鋼筆1 </td> <td class="tdleft"> <input name="text_10" type="text" id="text_10" class="width90 digital" /> </td> <td class="tdleft"> <input name="text_11" type="text" id="text_11" class="width110 digital" /></td> <td class="tdleft"> 鋼筆2 </td> <td class="tdleft"> <input name="text_12" type="text" id="text_12" class="width90 digital" /> </td> <td class="tdleft"> <input name="text_13" type="text" id="text_13" class="width90 digital" /> </td> <td class="tdleft"> <input type="text" class="width110" disabled="disabled" /> </td> </tr> </table> </li> </ul> </div> </body> </html> ~~~ 其實就是簡單的四則運算，難點在于需要計算的各個文本框的編號。如果知道了文本框的編號，如何確定是什么計算關系？也是一個難點。而且是業務相關的，似乎沒有通用的方法？如果知道業務規則，如何把業務規則保存在網頁中，通過js分析業務規則，進而完成需求呢？ **1關鍵點：如何保存業務規則 ?2如何分析業務規則** **1關鍵點：如何保存業務規則** 都知道htm標準是XML標準的一部分，xml有自定義標簽屬性，htm中也可以使用自定義標簽，因此使用自定義屬性Computationalexpressions來保存業務規則。例如：求和的屬性：Computationalexpressions='(text_1)+(text_2)+(text_3)' 相乘求和的屬性：Computationalexpressions='(text_5)*(text_6)' 除法的屬性：Computationalexpressions='Math.floor((text_7)/(text_8))' 綜合?的屬性：Computationalexpressions='(text_7)-(text_8)*(text_88)'? **2如何分析業務規則** 根據業務規則可以知道計算需要哪些文本框的編號，如果能把業務規則進一步分析自然就可以滿足需求了。分析業務規則，只要把文本框編號改為文本框的輸入值就可以了。因此思路就很簡單了：通過正則表達式匹配出文本框編號，改為文本框的值，最后再通過eval把文本轉為計算需要的腳本就可以了。最終代碼： ~~~ <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> </title> <script src="jquery-1.8.0.min.js" type="text/javascript"></script> <link href="Survey.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { var all=$("input[Computationalexpressions]");//獲取所有需要計算的文本框 var re = new RegExp(/$text_[0-9]+$/); //匹配計算表達式中的文本框編號 $.each(all, function(j, item){ var itemTemp=$(item); var id=itemTemp.attr("id");//合計的文本框編號 var Computationalexpressions=itemTemp.attr("Computationalexpressions");//計算表達式 var result= re.exec(Computationalexpressions); var idList = [];//次計算表達式涉及的所有文本框編號 while(result)//循環替換文本框的編號為文本框的值 { var temp=result[0];//匹配到文本框編號 var oneId=temp.substring(1,temp.length-1)//文本框編號，去掉括號 idList.push(oneId); var newCal="$('#"+oneId+"').val()"; var newCal2= "($.isNumeric("+newCal+")?parseFloat("+newCal+"):0)";//轉化為計算表達式 Computationalexpressions= Computationalexpressions.replace("("+oneId+")",newCal2); result= re.exec(Computationalexpressions); } BindBlur(idList,id,Computationalexpressions); }); }) function BindBlur(idList,totalId,Computationalexpressions)//綁定失去焦點的事件blur { $.each(idList, function(j, item){ var id=item; $("#"+id).blur( function () { var sum=eval(Computationalexpressions);//把文本變為js腳本 if($.isNumeric(sum)){ $("#"+totalId).val(sum); } } ); }); } </script> <body> <div class="tablebox"> <ul> <li> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan=""> </td> <td class="tdcol"> 政府財政</td>  <td class="tdcol"> 單位自籌</td> <td class="tdcol"> 其他資金</td> <td class="tdcol"> 合計</td> </tr> <tr> <td class="tdright width20" rowspan="1">相加求和</td> <td class="tdleft"> <input name="text_1" type="text" id="text_1" class="width110 digital" /></td> <td class="tdleft"> <input name="text_2" type="text" id="text_2" class="width110 digital" /></td> <td class="tdleft"> 金額：<input name="text_3" type="text" id="text_3" class="width90 digital" /> 來源：<input type="text" name="text_4" id="text_4" class="width90" /></td> <td class="tdleft"> <input type="text" class="width110" id='82row1' Computationalexpressions='(text_1)+(text_2)+(text_3)' disabled="disabled" /> </td> </tr> </table> <br/> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan="1"> </td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 產品數量</td> <td class="tdcol"> 合計</td> </tr> <tr> <td class="tdright width20" rowspan="1">相乘求和</td> <td class="tdleft"> 鋼筆 <td class="tdleft"> <input name="text_5" type="text" id="text_5" class="width110 digital" /></td> <td class="tdleft"> <input name="text_6" type="text" id="text_6" class="width90 digital" /> <td class="tdleft"> <input type="text" Computationalexpressions='(text_5)*(text_6)' class="width110" id='82row2' disabled="disabled" /> </td> </tr> </table> <br/> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan="1"> </td> <td class="tdcol"> 擁有現金</td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 最多可購買數量</td> <td class="tdcol"> 剩余現金</td> </tr> <tr> <td class="tdright width20" rowspan="1">除法</td> <td class="tdleft"> <input name="text_7" type="text" id="text_7" class="width110 digital" /> <td class="tdleft"> 鋼筆 </td> <td class="tdleft"> <input name="text_8" type="text" id="text_8" class="width90 digital" /> <td class="tdleft"> <input type="text" Computationalexpressions='Math.floor((text_7)/(text_8))' class="width110" id='text_88' disabled="disabled" /> </td> <td class="tdleft"> <input type="text" Computationalexpressions='(text_7)-(text_8)*(text_88)' class="width110" id='82row4' disabled="disabled" /> </td> </tr> </table> <br/> <table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> <tr> <td class="tdright" colspan="1"> </td> <td class="tdcol"> 擁有現金</td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 購買數量</td> <td class="tdcol"> 產品名稱</td>  <td class="tdcol"> 產品單價</td> <td class="tdcol"> 購買數量</td> <td class="tdcol"> 剩余現金</td> </tr> <tr> <td class="tdright width20" rowspan="1">綜合</td> <td class="tdleft"> <input name="text_9" type="text" id="text_9" class="width110 digital" /> <td class="tdleft"> 鋼筆1 </td> <td class="tdleft"> <input name="text_10" type="text" id="text_10" class="width90 digital" /> </td> <td class="tdleft"> <input name="text_11" type="text" id="text_11" class="width110 digital" /></td> <td class="tdleft"> 鋼筆2 </td> <td class="tdleft"> <input name="text_12" type="text" id="text_12" class="width90 digital" /> </td> <td class="tdleft"> <input name="text_13" type="text" id="text_13" class="width90 digital" /> </td> <td class="tdleft"> <input type="text" class="width110" Computationalexpressions='(text_9)-(text_10)*(text_11)-(text_12)*(text_13)' id='82row5' disabled="disabled" /> </td> </tr> </table> </li> </ul> </div> </body> </html> ~~~ 改進版腳本： ~~~ $(document).ready(function () { var all=$("input[Computationalexpressions]");//獲取所有需要計算的文本框 var re = new RegExp(/$text_[0-9]+$/); //匹配計算表達式中的文本框編號 $.each(all, function(j, item){ var itemTemp=$(item); var id=itemTemp.attr("id");//合計的文本框編號 var Computationalexpressions=itemTemp.attr("Computationalexpressions");//計算表達式 var result= re.exec(Computationalexpressions); var idList = [];//次計算表達式涉及的所有文本框編號 while(result) { var temp=result[0];//匹配到文本框編號 var oneId=temp.substring(1,temp.length-1)//文本框編號，去掉括號 idList.push(oneId); Computationalexpressions= Computationalexpressions.replace("("+oneId+")","GetValue('#"+oneId+"')"); result= re.exec(Computationalexpressions); } BindBlur(idList,id,Computationalexpressions); }); }) function GetValue(id) { var tempValue=$(id).val(); if($.isNumeric(tempValue)) { return parseFloat(tempValue); } return 0; } function BindBlur(idList,totalId,Computationalexpressions)//綁定失去焦點的事件blur { $.each(idList, function(j, item){ var id=item; $("#"+id).blur( function () { var sum=eval(Computationalexpressions);//把文本變為js腳本 if($.isNumeric(sum)){ $("#"+totalId).val(sum); } } ); }); } ~~~ [js綜合應用第一篇表格統計](http://blog.csdn.net/xuexiaodong009/article/details/10956003)