[置顶] 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 // 文档的高,屏幕 ...
随机推荐
- java——数据库——commons-DbUtils
Apache Commons DbUtils Tutorial The Apache Commons DbUtils library is a small set of classes designe ...
- nyist 500 一字棋
题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=500 这太并不难,只要把情况分清楚就可以了,本人由于考虑不是很周全,WA了n次....悲 ...
- centos6.4-x86-64系统更新系统自带Apache Http Server
系统自带Apache Http Server 版本比较老,有漏洞.现在对Apache Http Server进行升级.总体思路:先删除老的,再安装新的.详细步骤如下: 1 删除老版本 1.1 删除老A ...
- linux 在终端中打开图形化文件管理器
虽然终端十分强大,但在少数使用终端的时候,会突然需要图形化文件管理器的帮忙. 命令: xdg-open "dir" 例如 xdg-open ./ 用图形化文件管理器打开当前文件夹 ...
- Linux2.6中的Slab层
还记得一个进程创建的时候是什么给它分配的“进程描述符”吗?没错,是slab分配器,那么,这个slab分配器是个什么东西呢? 分配和释放数据结构是所有内核中最普遍的操作之一.为了 ...
- java常用系统包介绍
java.applet提供创建 applet 所必需的类和 applet 用来与其 applet 上下文通信的类.java.awt包含用于创建用户界面和绘制图形图像的所有类.java.awt.colo ...
- php正则表达式的基本语法
简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例 如,vi编辑器,Perl或PHP脚本语言,以及awk或sed sh ...
- 合作开发，导入MyEclipse项目报错问题
因工作原因,同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源代码,打成压缩包,发给我.我解压后,使用myeclipse开发工具,通过导入,将项目导入到我的开发工具中,这个时候有一个问 ...
- eclipse svn插件显示作者
在另一台电脑里安装了SVN插件后,发现项目文件后面只有版本号,没有作者名字了,找了很久才找到了,现记录在这里. window->preferences->team->svn-> ...
- HTML静态网页（标签、表格）
HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin ...