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 ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 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简单实现快速排序的方法
2015/04/04 PHP
php格式化时间戳
2016/12/17 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python selenium操作cookie的实现
2020/03/18 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
简述数组与指针的区别
2014/01/02 面试题
期末总结的个人自我评价
2013/11/02 职场文书
学习党章思想汇报
2014/01/07 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
长城导游词300字
2015/01/30 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL