[置顶] 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 // 文档的高,屏幕 ...
随机推荐
- 如何让对象只在堆或者栈中分配空间ANDC++禁止一个类被继承
在开始之前先来分析一下C++中的new运算符和operator new之间的关联. new:指我们在C++里通常用到的运算符,比如A* a = new A或者调用带参数的构造函数; 对于new来说, ...
- day5_python学习笔记_chapter6_字符串列表元组
1. 序列:seq[n], seq[x:y], seq * n序列重复n次,切片, 序列翻转 s=”abcde", s[::-1]="edcba" 内建函数:1. 类型转 ...
- Android 常用动画小结
1. 渐入动画 // Request the next activity transition (here starting a new one). startActivity(new Intent( ...
- 从零开始PHP学习 - 第三天
写这个系列文章主要是为了督促自己 每天定时 定量消化一些知识! 同时也为了让需要的人 学到点啥~! 本人技术实在不高!本文中可能会有错误!希望大家发现后能提醒一下我和大家! 偷偷说下 本教程最后的目 ...
- SVN权限配置
初始化SVN仓库后,里面有以下文件. 其中conf是对授权.认证进行管理的,conf目录里的内容有: passwd设立账户密码: authz权限管理: 假设pwd里有user1,user2两个账户 @ ...
- XSS CSRF
XSS CSRF XSS 参考 https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC ...
- liunx使用技巧
1.挂载与卸载U盘 新建一个目录:mkdir /mnt/usb; Fdisk –l |less 查看添加之后的设备名,设备文件系统格式 加载U盘设备: mount –t vfat /mnt/usb ...
- Thread和ExecutorService（一）
ExecutorService是Java并发包里面的一个线程池服务 线程池的优点 复用已有的线程,消除任务中创建线程的开销 通过优化线程的数量,提高性能,保证处理器一直处于忙的状态,而不必创建这么 ...
- Selenium之偷懒教程
进来一直停留在基础理论知识的学习中,认为太乏味,就写了一个网页自己主动化的demo:自己主动写日报.省的以后自己打开网页写啦. 直接上代码: 自己主动填写日报DEMO import java.io.B ...
- linux内核之网络协议栈
https://www.ibm.com/developerworks/cn/linux/l-ntflt/