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综合应用第一篇表格统计