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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
Javascript 继承机制实例
Aug 12 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
JS获取时间的方法
Jan 21 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
详解js中==与===的区别
2017/01/08 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
js验证密码强度解析
2020/03/18 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
原材料检验岗位职责
2014/03/15 职场文书
秘书英文求职信
2014/04/16 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python