博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[置顶] js综合应用:表格的四则运算
阅读量:7223 次
发布时间:2019-06-29

本文共 4286 字,大约阅读时间需要 14 分钟。

在做调查问卷的过程中,遇到一个表格的统计问题,算是需要些js方面的综合知识,所以记录下来。

在上次完成了基本的求和的基础上,添加了基本的加减乘除四则运算。

基本需求简化后如下:

对应的htm了为:

    
  • 政府财政 单位自筹 其他资金 合计
    相加求和 金额: 来源:
    产品名称 产品单价 产品数量 合计
    相乘求和 钢笔
    拥有现金 产品名称 产品单价 最多可购买数量 剩余现金
    除法 钢笔
    拥有现金 产品名称 产品单价 购买数量 产品名称 产品单价 购买数量 剩余现金
    综合 钢笔1 钢笔2

 

 

其实就是简单的四则运算,难点在于需要计算的各个文本框的编号。如果知道了文本框的编号,如何确定是什么计算关系?也是一个难点。而且是业务相关的,似乎没有通用的方法?

  如果知道业务规则,如何把业务规则保存在网页中,通过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把文本转为计算需要的脚本就可以了。

最终代码:

 

    
  • 政府财政 单位自筹 其他资金 合计
    相加求和 金额: 来源:
    产品名称 产品单价 产品数量 合计
    相乘求和 钢笔
    拥有现金 产品名称 产品单价 最多可购买数量 剩余现金
    除法 钢笔
    拥有现金 产品名称 产品单价 购买数量 产品名称 产品单价 购买数量 剩余现金
    综合 钢笔1 钢笔2

改进版脚本:

 

$(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);		     }			} );			  });}

 

 

你可能感兴趣的文章
[原创] 使ssh不用输入密码(转)
查看>>
PHP实现四种基本排序算法
查看>>
HTTP协议&SOCKET协议-摘抄
查看>>
Firewall cmd 命令
查看>>
2019 大数据学习入门必备规划
查看>>
java json 转为xml文件
查看>>
python中魔术方法简述
查看>>
Java实用手册
查看>>
GIF如何截取录制,怎么做GIF表情包
查看>>
技术的顶峰
查看>>
js动态添加事件-事件委托
查看>>
Python和人工智能到底啥关系?
查看>>
必读的Python入门书籍,你都看过吗?(内有福利)
查看>>
Java 科学计数法转成完整数字展示;double类型小数值不准确处理
查看>>
PHP代码补全(提示)中的两个 Atom 插件的对比
查看>>
C语言之流程控制
查看>>
ElasticSearch ik,elasticsearch-jdbc 使用 和 yii2 实例
查看>>
RPA视频教程丨UiBot—Function函数详解
查看>>
Getinstall如何解决下载一app 点击浏览器就变成一二微码
查看>>
我的友情链接
查看>>