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);
}

总结:初次遇见此类问题,真的没有什么比较好的思路。这样虽然初步算是解决了,但灵活性很小,例如每一个单元格只能有一个需要统计的文本框,多个就会出错。不过根据现在最简单如果进行扩展,就会适应更复杂的情况。

(0)

相关推荐

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

    在做调查问卷的过程中,遇到一个表格的统计问题,算是需要些js方面的综合知识,所以记录下来. 基本需求如下:  核心的htm如下: 复制代码 代码如下: <div class="tablebox"> <h2> <span>(3)2010年市属疾病预防控制中心信息化建设资金来源及分配情况</span></h2> <div class="blockB"> <p> 说明:单位:万元,精确到小

  • JS简单实现表格排序功能示例

    本文实例讲述了JS简单实现表格排序功能的方法.分享给大家供大家参考,具体如下: 思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • JS/jQuery实现超简单的Table表格添加,删除行功能示例

    本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能.分享给大家供大家参考,具体如下: 最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢! 需要的拿去,转载请在明显的位置标注出出处!!! <html> <head> <title>table添加/删除行</title> </head> <body> <t

  • JS实现简单的表格增删

    本文实例为大家分享了JS实现表格增删的具体代码,供大家参考,具体内容如下 描述: JS--实现简单的表格增删. 效果: 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--4.编号:文本框 书名:文本框 作者:文本框 出版社:文本框

  • JS 拼凑字符串的简单实例

    和Java一样,JS中直接用"+"号拼凑字符串是很耗费资源的,所以在大量拼凑字符串的情景中,我们也需要一个类似于StringBuffer的工具, 下面利用Array.join()方法实现StringBuffer function StringBuffer() { this._strs = new Array; } StringBuffer.prototype.append = function (str) { this._strs.push(str); }; StringBuffer.

  • 用原生JS对AJAX做简单封装的实例代码

    首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

  • js复制内容到剪贴板代码,js复制代码的简单实例

    如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte

  • js实现StringBuffer的简单实例

    实现: function StringBuffer() { this.__strings__ = []; }; StringBuffer.prototype.Append = function (str) { this.__strings__.push(str); return this; }; //格式化字符串 StringBuffer.prototype.AppendFormat = function (str) { for (var i = 1; i < arguments.length;

  • 用python实现简单EXCEL数据统计的实例

    任务: 用python时间简单的统计任务-统计男性和女性分别有多少人. 用到的物料:xlrd 它的作用-读取excel表数据 代码: import xlrd workbook = xlrd.open_workbook('demo.xlsx') #打开excel数据表 SheetList = workbook.sheet_names()#读取电子表到列表 SheetName = SheetList[0]#读取第一个电子表的名称 Sheet1 = workbook.sheet_by_index(0)

  • VUE写一个简单的表格实例

    目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展--个性化设置 正文: 我以前是后端(asp.net)开发,会点js.jQuery,但是不会写js特效,至于css嘛,拿来用现成的可以,自己动手写就不会了. 发现现在前端开发的势头太猛了,有一点要干掉后端的感觉,于是萌发了想要学一学前端开发的想法.那么前端三大框架,先学哪一个呢?就先学学Vue吧,为啥呢?很简单呀,他只

随机推荐