[置顶] js综合应用：表格的四则运算
在做调查问卷的过程中，遇到一个表格的统计问题，算是需要些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中,一切事物都是对象.对象是一切的基础. 而具体到某一个对象时. 对象则是包含一组变量和函数的集合实例 我们先来中体会下je对象的全局. 接下来就具体揭开这个对象的面纱吧 ja对象分类 Funct ...
- [置顶] js正则表达式的使用
js中的正则表达式比起C#中的正则表达式要弱很多,但基本够用了 1定义正则表达式 2关于验证的三个这则表达式方法 3正则表达式式的转义字符 1定义正则表达式 在js中定义正则表达式很简单,有两种方式, ...
- [置顶] js模板方法的思路及实现
在js中如何实现设计模式中的模板方法? 思路的产生必然要求熟悉js,如何实现?就很简单了,都知道在js中如果定义两个相同名称的方法,前一个方法就会被后一个方法覆盖掉,使用此特点就可以实现模板方法. 例 ...
- [置顶] js操作iframe兼容各种浏览器
在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...
- [置顶] js中如何复制一个对象，如何获取所有属性和属性对应的值
在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...
- [置顶] js 实现 <input type="file" /> 文件上传
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...
- [置顶] js 控制文章中字体的大小，mootools实现
文中字体要12.14.16号中选择: <span class="zh">字号:<b class="change-font">12< ...
- 表格中上移下移置顶的js操作
<script> $(function(){ //上移 var $up = $(".up") $up.click(function() { var $tr = ...
- js之滚动置顶效果
0.js获取高度 ? 1 2 3 4 5 6 document.all // 只有ie认识 document.body.clientHeight // 文档的高,屏幕 ...
随机推荐
- mybaitis配置信息
在配置mybatis当中,jdbcType的名称要大写,时间类型DATE只能传入年月日,要想传入时分秒,应该使用TIMESTAMP http://www.blogjava.net/hello-yun/ ...
- Fedora安装theano
Fedora下安装theano Fedora下安装theano Theano的安装依赖很多包,有必须的,有可选的.此外,python版本必须大于2.6,请在shell直接键入python,如果小于2. ...
- K-means算法[聚类算法]
聚类算法k-Means的实现 <?php /* *Kmeans法(聚类算法的实现) */ /* *求误差平方和J */ //----------------------------------- ...
- android-数据持久化
动态文件 String FILE_NAME = "tempfile.tmp"; try { //读 FileInputStream fis = openFileInput(FILE ...
- Oracle ODI系列之一（ODI知识模块）
Oracle ODI系列之一(ODI知识模块) ODI简介 ODI(Oracle Data Integrator)前身是Sunopsis Active Integration Platform ...
- JavaEE Tutorials (12) - 创建和使用基于字符串的Criteria查询
12.1基于字符串的Criteria API查询概述17812.2创建基于字符串的查询17812.3执行基于字符串的查询179
- HDU 5818 Joint Stacks（左偏树）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5818 [题目大意] 给出两个栈A B(初始时为空),有三种操作: push.pop.merge. ...
- HDU 5800 To My Girlfriend（单调DP）
[题目链接]http://acm.hdu.edu.cn/showproblem.php?pid=5800 [题目大意] 给出一个容量上限s,f[i][j][k][l][m]表示k和l两个物品不能选,i ...
- oracle 配置监听
LISTENER = (DESCRIPTION_LIST = (DESCRIPTION = (ADDRESS = (PROTOCOL = IPC)(KEY = EXTPROC1521 ...
- js柯里化的一个应用
听到同学说面试一道题目 add(1)(2)(3)(4); 查询了下资料 这是一个js里面的柯里化 现象 add_curry防范返回的是一个 retVal,并不是执行结果.这里的代码很想递归,但是不是 ...