[置顶] 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 // 文档的高,屏幕 ...
随机推荐
- USACO Section 4.2 The Perfect Stall（二分图匹配）
二分图的最大匹配.我是用最大流求解.加个源点s和汇点t:s和每只cow.每个stall和t 连一条容量为1有向边,每只cow和stall(that the cow is willing to prod ...
- Linux学习之Makefile文件的编写
转自:http://goodcandle.cnblogs.com/archive/2006/03/30/278702.html 目的: 基本掌握了 make 的用法,能在Linux系统上编 ...
- tag标签添加删除并把值存入到一个input的value内
html: <input type="text" id="tagValue" style="display: none;" /> ...
- 加密解密技术—Web.config加密和解密
阅读目录 一:我们为什么要对web.config配置文件中的配置节加密? 二:怎么样加密和解密? 三:实例 四:运行效果 一:我们为什么要对web.config配置文件中的配置节加密? 因为在我们的项 ...
- es5 api
ES5 Object.create(prototype, descriptors) //创建对象 var o1 = {foo:'bar'}; var o2 = new Object(); //Obje ...
- php基础知识总结
PHP 代表 PHP: Hypertext Preprocessor PHP 文件可包含文本.HTML.JavaScript代码和 PHP 代码 PHP 代码在服务器上执行,结果以纯 HTML 形式返 ...
- thrift之初体验
hrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, Perl, ...
- CVTE 一面
在网上做完了测评之后,当天就收到面试的通知了,CVTE效率真高.第二天就去参加面试,面试前紧张了一把,后来去到之后发现只有几个应聘者,很多面试官前面都没人,估计现在中午一点,所以都去吃饭了.我和一个同 ...
- poj 3269 Building A New Barn
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
- 利用svg技术实现在线动画演示
搜索MDCC的论文,发现了这个站点,里面有演示动画,居然是通过svg来实现的. 分享给大家看看: 有空研究下,做一个类似的演示,展示一下OceanBase内部的常见操作. 展示一个svg做的游戏: h ...