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


Posted in Javascript onSeptember 03, 2013

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

基本需求如下:
js综合应用实例简单的表格统计 
核心的htm如下:

<div class="tablebox"> 
<h2> 
<span>(3)2010年市属疾病预防控制中心信息化建设资金来源及分配情况</span></h2> 
<div class="blockB"> 
<p> 
说明:单位:万元,精确到小数点后1位</p> 
</div> 
<ul> 
<li> 
<table border="0" cellspacing="0" cellpadding="0" class="templateTable" width="750px"> 
<tr> 
<td class="tdright" colspan="2"> 
</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="4">直接支出</td> 
<td class="tdright"> 
软件</td> 
<td class="tdleft"> 
<input name="text_4780" type="text" id="text_4780" class="width110 digital" /></td> 
<td class="tdleft"> 
<input name="text_4782" type="text" id="text_4782" class="width110 digital" /></td> 
<td class="tdleft"> 
金额:<input name="text_4783" type="text" id="text_4783" class="width90 digital" /> 
来源:<input type="text" name="text_4784" id="text_4784" class="width90" /></td> 
<td class="tdleft"> 
<input type="text" class="width110" id='82row1' disabled="disabled" /> 
</td> 
</tr> 
<tr> 
<td class="tdright"> 
硬件</td> 
<td class="tdleft"> 
<input name="text_4785" type="text" id="text_4785" class="width110 digital" /></td> 
<td class="tdleft"> 
<input name="text_4787" type="text" id="text_4787" class="width110 digital" /></td> 
<td class="tdleft"> 
金额:<input name="text_4788" type="text" id="text_4788" class="width90 digital" /> 
来源:<input type="text" name="text_4789" id="text_4789" class="width90" /></td> 
<td class="tdleft"> 
<input type="text" id="82row2" class="width110" disabled="disabled" /></td> 
</tr> 
<tr> 
<td class="tdright"> 
运行维护</td> 
<td class="tdleft"> 
<input name="text_4790" type="text" id="text_4790" class="width110 digital" /></td> 
<td class="tdleft"> 
<input name="text_4792" type="text" id="text_4792" class="width110 digital" /></td> 
<td class="tdleft"> 
金额:<input name="text_4793" type="text" id="text_4793" class="width90 digital" /> 
来源:<input type="text" name="text_4794" id="text_4794" class="width90" /></td> 
<td class="tdleft"> 
<input type="text" id="82row3" class="width110" disabled="disabled" /></td> 
</tr> 
<tr> 
<td class="tdright"> 
其他投入</td> 
<td class="tdleft"> 
<input name="text_4795" type="text" id="text_4795" class="width110 digital" /></td> 
<td class="tdleft"> 
<input name="text_4797" type="text" id="text_4797" class="width110 digital" /></td> 
<td class="tdleft"> 
金额:<input name="text_4798" type="text" id="text_4798" class="width90 digital" /> 
来源:<input type="text" name="text_4799" id="text_4799" class="width90" /></td> 
<td class="tdleft"> 
<input type="text" id="82row4" class="width110" disabled="disabled" /></td> 
</tr> 
<tr> 
<td class="tdright" colspan="2"> 
经费下拨</td> 
<td class="tdleft"> 
<input name="text_6362" type="text" id="text_6362" class="digital width110" /></td> 
<td class="tdleft"> 
<input name="text_6363" type="text" id="text_6363" class="digital width110" /></td> 
<td class="tdleft"> 
金额:<input name="text_6364" type="text" id="text_6364" class="digital width90" /> 
来源:<input name="text_6365" type="text" id="text_6365" class="width90" /></td> 
<td class="tdleft"> 
<input type="text" id="82row5" class="width110" disabled="disabled" /></td> 
</tr> 
<tr> 
<td class="tdright" colspan="2"> 
合计</td> 
<td class="tdleft"> 
<input type="text" id="82col1" title1="surveyTable" disabled="disabled" /></td> 
<td class="tdleft"> 
<input type="text" id="82col3" title1="surveyTable" disabled="disabled" /></td> 
<td class="tdleft"> 
<input type="text" id="82col4" title1="surveyTable" disabled="disabled" /></td> 
<td class="tdleft"> 
<input type="text" id="82sum" 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有了获取每一行的的文本框的思路后,在考虑每一列的思路,和获取每一行的思路基本相同,但在修改的过程中,发现还是有很多不同。

经过测试的代码如下

function GetOneColumnAllChild(totalId,index) 
{ 
var idList = []; 
var trList=$("#"+totalId).parent('td').parent('tr').parent().children("tr");////取统计文本框的父节点td的父节点tr的父节点table,然后再取table的子节点,得到所有tr 
$.each(trList, function(i, n){ //遍历所有的tr 
var tdList=$(n).children("td") // 
if(tdList.length>0) 
{ 
var inputindex=0; 
$.each(tdList, function(j, item){ //遍历所有的td 
// if(j==index)// 由于<td class="tdright width20" rowspan="4">直接支出</td>,导致如果这样取数据会出错,因为第一行多了一个td,其他含都比第一行少了一个td 
// { 
var inputList=$(item).children("input[type='text']"); 
if(inputList.length>0) { 
$.each(inputList, function(k, iteminput){ //遍历所有的文本框 
var item=$(iteminput); 
if(item.hasClass("digital")){ 
inputindex++; 
if(inputindex==index){ //支取指定列的文本框 
idList.push(item.attr("id")); 
} 
} 
});//end inputList 
}// end if(inputList.length>0) 
});// end tdList 
} // if(tdList.length>0) 
});//end trList 
BindBlur(idList,totalId); 
//var NameList = idList.join(","); 
//alert(NameList); 
}

总结:初次遇见此类问题,真的没有什么比较好的思路。这样虽然初步算是解决了,但灵活性很小,例如每一个单元格只能有一个需要统计的文本框,多个就会出错。不过根据现在最简单如果进行扩展,就会适应更复杂的情况。
Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
Js sort排序使用方法
Oct 17 Javascript
五段实用的js高级技巧
Dec 20 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
浅谈javascript的调试
Jan 28 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 #Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 #Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 #Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 #Javascript
使用js操作cookie的一点小收获分享
Sep 03 #Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 #Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 #Javascript
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
JavaScript类的写法
2016/09/17 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
基于keras中的回调函数用法说明
2020/06/17 Python
python实现画图工具
2020/08/27 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
python time()的实例用法
2020/11/03 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
村官工作鉴定评语
2014/01/27 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
出生证明格式
2015/06/15 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python