当前位置: 代码迷 >> JavaScript >> js综合应用:报表的四则运算
  详细解决方案

js综合应用:报表的四则运算

热度:424   发布时间:2013-10-08 16:46:23.0
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>










js综合应用第一篇表格统计