宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-11-16

在做问卷的过程中,遇到了表格中的一个统计问题,需要一些js的综合知识,所以就记录下来了。基本需求如下:

核心的超文本标记语言文件的后缀如下:复制代码代码如下H2跨度(3)2010年市属疾病预防控制中心信息化建设资金来源及分配情况/span/h2 div class='blockB' p说明:单位:万元,精确到小数点后一位/p/ul Li分区表格边框='0 '单元格间距='0 '单元格填充='0 '类='templateTable '宽度='750px' tr td类='tdright' colspan='2' /td td类='tdcol '政府财政/td!- td class='tdcol '项目经费/td - td class='tdcol '单位自筹TD/TD类='tdcol '其他资金TD/TD类='tdcol '合计/TD/tr/tr TD class=' tdright width 20 '行跨度=' 4 '直接支出/td td class='tdright '软件/TD TD TD class=' tdleft '输入名称='text_4780 '类型='text' id='text_4780 '类='宽度110数字'/TD TD TD class=' tdleft '输入名称='text_4782 '类型='text' id='text_4782 '类='宽度110数字'/TD TD TD class=' tdleft '金额:输入名称=' text _ 4783 ' type=' text ' id=' text _ 4783 ' class=' width 90 digital '/来源:输入类型=' text ' name=' text _ 4784 ' id=' text _ 4784 ' class=' width 90 '/TD TD TD class=' tdleft '输入类型=' text ' class=' width 110 ' id=' 82 row 1 ' disabled=' disabled '//TD/tr/tr TD class=' tdright '硬件/TD TD TD class=' tdleft '输入名称='text_4785 '类型='text' id='text_4785 '类='宽度110数字'/TD TD TD class=' tdleft '输入名称='text_4787 '类型='text' id='text_4787 '类='宽度110数字'/TD TD TD class=' tdleft '金额:输入名称=' text _ 4788 ' type=' text ' id=' text _ 4788 ' class=' width 90 digital '/来源:输入类型=' text '名称=' text _ 4789 ' id=' text _ 4789 ' class=' width 90 '/TD/TD class=' tdleft '输入类型=' text ' id=' 82第2行' class=' width 110 ' disabled=' disabled '/TD/tr TD class=' tdright '运行维护/TD TD TD class=' tdleft '输入名称='text_4790 '类型='text' id='text_4790 '类='宽度110数字'/TD TD TD class=' tdleft '输入名称='text_4792 '类型='text' id='text_4792 '类='宽度110数字'/TD TD TD class=' tdleft '金额:输入名称='文本_ 4793 ' type=' text ' id=' text _ 4793 ' class=' width 90 digital '/来源:输入类型=' text ' name=' text _ 4794 ' id=' text _ 4794 ' class=' width 90 '/TD/TD class=' tdleft '输入类型=' text ' id=' 82第3行' class=' width 110 ' disabled=' disabled '/TD/tr TD class=' tdright '其他投入/TD TD TD class=' tdleft '输入名称='text_4795 '类型='text' id='text_4795 '类='宽度110数字'/TD TD TD class=' tdleft '输入名称='text_4797 '类型='text' id='text_4797 '类=宽度110数字'/TD TD TD class=' tdleft '金额:输入名称=' text _ 4798 ' type=' text ' id=' text _ 4798 ' class=' width 90 digital '/来源:输入类型=' text ' name=' text _ 4799 ' id=' text _ 4799 ' class=' width 90 '/TD TD TD class=' tdleft '输入类型=' text ' id=' 82第4行' class=' width 110 ' disabled=' disabled '/TD/tr TD class=' tdright ' colspan=' 2 '经费下拨/TD TD TD class=' tdleft '输入名称='text_6362 '类型='text' id='text_6362 '类='数字宽度110 '/TD TD TD类=' tdleft '输入名称='text_6363 '类型='text' id='text_6363 '类='数字宽度110 '/TD TD TD class=' tdleft '金额:输入名称=' text _ 6364 ' type=' text ' id=' text _ 6364 ' class='数字宽度90 '/来源:输入名称=' text _ 6365 ' type=' text ' id=' text _ 6365 ' class=' width 90 '/TD TD TD class=' tdleft '输入类型=' text ' id=' 82第5行' class=' width 110 ' disabled=' disabled '/TD/tr TD class=' tdright ' colspan=' 2 '合计TD/TD类='tdleft '输入类型=' text ' id=' 82 col 1 ' title 1=' survetable '已禁用='禁用'/TD类='tdleft '输入类型=' text ' id=' 82 col 3 ' title 1=' survetable ' disable=' disabled '/TD类=' text ' id=' 82 col 4 ' title 1=' survetable ' disable=' disabled '/TD类='tdleft '输入类型='text' id='82sum '看到这样的基本需求,本身并不难,基本思路就是在更新数据后,失去了焦点的同时,更新对应的合计文本框。难点在于获取需要累加那些文本框的值。

1如果只知道总的文本框ID,怎么才能得到需要累加的文本框号?分析行统计后可以发现,行统计所需的文本框和合计文本框都在同一个tr标签中,都有类digital。例如,82row1中需要计算的文本框text_4780、text_4782和text_4783都在同一个tr标签中,类都有数字(这样就可以排除不需要统计的文本框text_4784)。所以基本思路就是根据这个关系找到需要统计的文本框。例如,对于82row1,您需要找到文本框text_4780、text_4782和text_4783。测试过的js基本代码如下:复制代码如下:函数getonerowallchild(累加器){ vari list=[];var TDLiST=$(' # ' TotaL d)。父代(' td ')。父项()。儿童(' TD ');//取统计文本框的父节点td的父节点tr,再取tr的子节点,得到所有TD $。各在同一行(TD列表,函数(I,n){//循环TD var输入=$ (n)。children(' input[type=' text ']');//获取文本框if (inputs.length0) {$。每一个(inputs,function (j,item input){//在td中循环文本框var item=$(item input);if(item . has class(' digital ')//判断是否为必填文本框,排除源列{var id=item.attr('id ')的文本段;idlist . push(id);} });} });//var NameList=idList.join(',');//alert(NameList);绑定模糊(idList,TotaL d);}函数绑定模糊(idlest,累加器)//绑定事件模糊{$。每个(idlest,function (j,item){ var id=item;$(“#”id)。blur(function(){ updateSum(idList,totald)});});}函数更新sum (idle,total)//更新统计值{ var sum=0.0$.每个(idList,function(j,item){ var id=item;var值=$(“#”id)。val();if($。isNumeric(value)){ sum=parseFloat(value);} });$(“#”TotalD)。val(总和);} 2有了获取每一行文本框的想法后,考虑每一列的想法和获取每一行的想法基本一致,但是在修改的过程中发现还是有很多不同的地方。测试代码如下:复制代码如下:函数getonecolumnalchild(累加器,索引){ vari list=[];var trList=$(' # ' TotaL d)。父代(' td ')。父代(' tr ')。父项()。儿童(' tr ');////取统计文本框td的父节点tr的父节点表,然后取表的子节点,得到所有tr $。每个(tr列表,函数(I,n){//遍历所有tr var TD列表=$ (n)。children ('TD')//if (tdlist。length0) {。$.每一个(td list,function (j,item){//遍历所有td//if(j==index)//因为TD class=' TD right width 20 ' row span=' 4 '直接支出/td,如果用这种方式取数据会有错误,因为第一行多了一个TD。其他都是一个TD/{ var输入列表=$(项)。小于第一行的子项(' input[type=' text ']');If (inputlist.length0) {$。每个(inputlist,function (k,item input){//遍历所有文本框var item=$(item input);if(item . has class(' digital '){ input index;If(inputindex==index){ //撤回指定列的文本框idlest . push(item . attr(' id '));} } });//end input list }//end if(input list . length 0)});//end TDLiST }//if(TDLiST . length 0)});//end trList BindBlur(idList,TotaL d);//var NameList=idList.join(',');//alert(NameList);}总结:第一次遇到这样的问题,真的没有什么好的想法。虽然这是一个初步的解决方案,但它几乎没有灵活性。比如每个单元格只能有一个需要统计的文本框,很多文本框会出错。不过按照目前最简单的来说,如果扩展的话,会适应更复杂的情况。

更多资讯
游戏推荐
更多+