js综合应用实例简单的表格统计

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

基本需求如下:

js综合应用实例简单的表格统计

 
核心的htm如下:

复制代码 代码如下:


<div>
<h2>
<span>(3)2010年市属疾病预防控制中心信息化建设资金来源及分配情况</span></h2>
<div>
<p>
说明:单位:万元,精确到小数点后1位</p>
</div>
<ul>
<li>
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
</td>
<td>
政府财政</td>
<!--<td>
项目经费</td>-->
<td>
单位自筹</td>
<td>
其他资金</td>
<td>
合计</td>
</tr>
<tr>
<td rowspan="4">直接支出</td>
<td>
软件</td>
<td>
<input type="text" /></td>
<td>
<input type="text" /></td>
<td>
金额:<input type="text" />
来源:<input type="text" /></td>
<td>
<input type="text" disabled="disabled" />
</td>
</tr>
<tr>
<td>
硬件</td>
<td>
<input type="text" /></td>
<td>
<input type="text" /></td>
<td>
金额:<input type="text" />
来源:<input type="text" /></td>
<td>
<input type="text" disabled="disabled" /></td>
</tr>
<tr>
<td>
运行维护</td>
<td>
<input type="text" /></td>
<td>
<input type="text" /></td>
<td>
金额:<input type="text" />
来源:<input type="text" /></td>
<td>
<input type="text" disabled="disabled" /></td>
</tr>
<tr>
<td>
其他投入</td>
<td>
<input type="text" /></td>
<td>
<input type="text" /></td>
<td>
金额:<input type="text" />
来源:<input type="text" /></td>
<td>
<input type="text" disabled="disabled" /></td>
</tr>
<tr>
<td colspan="2">
经费下拨</td>
<td>
<input type="text" /></td>
<td>
<input type="text" /></td>
<td>
金额:<input type="text" />
来源:<input type="text" /></td>
<td>
<input type="text" disabled="disabled" /></td>
</tr>
<tr>
<td colspan="2">
合计</td>
<td>
<input type="text" title1="surveyTable" disabled="disabled" /></td>
<td>
<input type="text" title1="surveyTable" disabled="disabled" /></td>
<td>
<input type="text" title1="surveyTable" disabled="disabled" /></td>
<td>
<input type="text" title1="surveyTable" disabled="disabled" /></td>
</tr>
</table>
</li>
</ul>
</div>


看到这样的基本需求,本身并不难,基本思路就是在更新数据后,失去了焦点的同时,更新对应的合计文本框。难点在于获取需要累加那些文本框的值。

1如果只知道合计的文本框ID如何得到需要累加的文本框编号呢?

先分析行统计,可以发现,行统计需要的文本框和合计的文本框都在同一个tr标签中,而且都有类digital。例如82row1需要计算的文本框text_4780,text_4782,text_4783

都在同一个tr标签中,而且类都有digital(这样就可以排除不需要统计的文本框text_4784)。

所以基本的思路就是根据这个关系去寻找需要统计的文本框,例如对于82row1就需要找到文本框text_4780,text_4782,text_4783。

经过测试的基本js代码如下:

复制代码 代码如下:


function GetOneRowAllChild(totalId)
{
var idList = [];
var tdList=$("#"+totalId).parent('td').parent().children("td");//取统计文本框的父节点td的父节点tr,然后再取tr的子节点,得到同一行的所有td
$.each(tdList, function(i, n){//循环td
var inputs=$(n).children("input[type='text']");//得到td中的文本框
if(inputs.length>0)
{
$.each(inputs, function(j, itemInput){ //循环td中的文本框
var item=$(itemInput);
if(item.hasClass("digital"))//判断是不是需要的文本框,排除来源列的文本款
{
var id=item.attr("id");
idList.push(id);
}
});
}
});
//var NameList = idList.join(",");
//alert(NameList);
BindBlur(idList,totalId);
}
function BindBlur(idList,totalId)//绑定失去焦点的事件blur
{
$.each(idList, function(j, item){
var id=item;
$("#"+id).blur( function () { updateSum(idList,totalId) } );
});
}
function updateSum(idList,totalId)//更新统计值
{
var sum=0.0;
$.each(idList, function(j, item){
var id=item;
var value=$("#"+id).val();
if($.isNumeric(value))
{
sum+=parseFloat(value);
}
});
$("#"+totalId).val(sum);
}


2有了获取每一行的的文本框的思路后,在考虑每一列的思路,和获取每一行的思路基本相同,但在修改的过程中,发现还是有很多不同。

经过测试的代码如下

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzfjg.html