js综合应用：表格的四则运算
来源：互联网 发布：kafka java 编辑：程序博客网 时间：2024/05/19 20:18
在做调查问卷的过程中，遇到一个表格的统计问题，算是需要些js方面的综合知识，所以记录下来。
在上次完成了基本的求和的基础上，添加了基本的加减乘除四则运算。
基本需求简化后如下：
对应的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> <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> <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> <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> <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> <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> <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> <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> <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综合应用第一篇表格统计
- js综合应用：表格的四则运算
- js综合应用简单的表格统计
- d3.js leaflet.js OpenStreetMap的综合应用
- 栈的应用--简单四则运算
- 栈的应用--四则运算 c++
- 栈的应用-四则运算求值
- Ext Js 3.2的一个FormPanel的综合应用
- js数组和字符串间的综合应用
- 表格和伪选择器的综合应用以及一些细节问题
- MSHFlexGrid的综合应用
- listview的综合应用
- 通知的综合应用
- 循环的综合应用
- CSS的综合应用
- Web的综合应用
- AngularJs的综合应用
- NSWorkspace的综合应用
- js四则运算
- VC 快速枚举系统所有字体
- 键路径
- Linux CentOS安装yum
- 设计模式C++学习笔记之一（Strategy策略模式）
- opencv用鼠标在窗口中画方形的程序
- js综合应用：表格的四则运算
- hive Exceeded MAX_FAILED_UNIQUE_FETCHES; bailing-out.
- 绕过权限检查新增数据
- Tomcat 6 server
- 格式转换
- 《android 4高级编程》--第2章 开始入手 "又是一个hello world"
- onInterceptTouchEvent和onTouchEvent调用时序
- hibernate以及实体配置文件最简形式
- spring mvc 无法使用EntityManage和注入问题
