提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS实例统计应用 简单 表格 综合
2023-06-13 09:15:05 时间
在做调查问卷的过程中，遇到一个表格的统计问题，算是需要些js方面的综合知识，所以记录下来。

基本需求如下：
 
核心的htm如下：
复制代码代码如下:

<divclass="tablebox">
<h2>
<span>（3）2010年市属疾病预防控制中心信息化建设资金来源及分配情况</span></h2>
<divclass="blockB">
<p>
说明：单位：万元，精确到小数点后1位</p>
</div>
<ul>
<li>
<tableborder="0"cellspacing="0"cellpadding="0"class="templateTable"width="750px">
<tr>
<tdclass="tdright"colspan="2">
</td>
<tdclass="tdcol">
政府财政</td>
<!--<tdclass="tdcol">
项目经费</td>-->
<tdclass="tdcol">
单位自筹</td>
<tdclass="tdcol">
其他资金</td>
<tdclass="tdcol">
合计</td>
</tr>
<tr>
<tdclass="tdrightwidth20"rowspan="4">直接支出</td>
<tdclass="tdright">
软件</td>
<tdclass="tdleft">
<inputname="text_4780"type="text"id="text_4780"class="width110digital"/></td>
<tdclass="tdleft">
<inputname="text_4782"type="text"id="text_4782"class="width110digital"/></td>
<tdclass="tdleft">
金额：<inputname="text_4783"type="text"id="text_4783"class="width90digital"/>
来源：<inputtype="text"name="text_4784"id="text_4784"class="width90"/></td>
<tdclass="tdleft">
<inputtype="text"class="width110"id="82row1"disabled="disabled"/>
</td>
</tr>
<tr>
<tdclass="tdright">
硬件</td>
<tdclass="tdleft">
<inputname="text_4785"type="text"id="text_4785"class="width110digital"/></td>
<tdclass="tdleft">
<inputname="text_4787"type="text"id="text_4787"class="width110digital"/></td>
<tdclass="tdleft">
金额：<inputname="text_4788"type="text"id="text_4788"class="width90digital"/>
来源：<inputtype="text"name="text_4789"id="text_4789"class="width90"/></td>
<tdclass="tdleft">
<inputtype="text"id="82row2"class="width110"disabled="disabled"/></td>
</tr>
<tr>
<tdclass="tdright">
运行维护</td>
<tdclass="tdleft">
<inputname="text_4790"type="text"id="text_4790"class="width110digital"/></td>
<tdclass="tdleft">
<inputname="text_4792"type="text"id="text_4792"class="width110digital"/></td>
<tdclass="tdleft">
金额：<inputname="text_4793"type="text"id="text_4793"class="width90digital"/>
来源：<inputtype="text"name="text_4794"id="text_4794"class="width90"/></td>
<tdclass="tdleft">
<inputtype="text"id="82row3"class="width110"disabled="disabled"/></td>
</tr>
<tr>
<tdclass="tdright">
其他投入</td>
<tdclass="tdleft">
<inputname="text_4795"type="text"id="text_4795"class="width110digital"/></td>
<tdclass="tdleft">
<inputname="text_4797"type="text"id="text_4797"class="width110digital"/></td>
<tdclass="tdleft">
金额：<inputname="text_4798"type="text"id="text_4798"class="width90digital"/>
来源：<inputtype="text"name="text_4799"id="text_4799"class="width90"/></td>
<tdclass="tdleft">
<inputtype="text"id="82row4"class="width110"disabled="disabled"/></td>
</tr>
<tr>
<tdclass="tdright"colspan="2">
经费下拨</td>
<tdclass="tdleft">
<inputname="text_6362"type="text"id="text_6362"class="digitalwidth110"/></td>
<tdclass="tdleft">
<inputname="text_6363"type="text"id="text_6363"class="digitalwidth110"/></td>
<tdclass="tdleft">
金额：<inputname="text_6364"type="text"id="text_6364"class="digitalwidth90"/>
来源：<inputname="text_6365"type="text"id="text_6365"class="width90"/></td>
<tdclass="tdleft">
<inputtype="text"id="82row5"class="width110"disabled="disabled"/></td>
</tr>
<tr>
<tdclass="tdright"colspan="2">
合计</td>
<tdclass="tdleft">
<inputtype="text"id="82col1"title1="surveyTable"disabled="disabled"/></td>
<tdclass="tdleft">
<inputtype="text"id="82col3"title1="surveyTable"disabled="disabled"/></td>
<tdclass="tdleft">
<inputtype="text"id="82col4"title1="surveyTable"disabled="disabled"/></td>
<tdclass="tdleft">
<inputtype="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代码如下：
复制代码代码如下:

functionGetOneRowAllChild(totalId)
{
varidList=[];
vartdList=$("#"+totalId).parent("td").parent().children("td");//取统计文本框的父节点td的父节点tr，然后再取tr的子节点，得到同一行的所有td
$.each(tdList,function(i,n){//循环td
varinputs=$(n).children("input[type="text"]");//得到td中的文本框
if(inputs.length>0)
{
$.each(inputs,function(j,itemInput){//循环td中的文本框
varitem=$(itemInput);
if(item.hasClass("digital"))//判断是不是需要的文本框，排除来源列的文本款
{
varid=item.attr("id");
idList.push(id);
}
});
}
});
//varNameList=idList.join(",");
//alert(NameList);
BindBlur(idList,totalId);
}
functionBindBlur(idList,totalId)//绑定失去焦点的事件blur
{
$.each(idList,function(j,item){
varid=item;
$("#"+id).blur(function(){updateSum(idList,totalId)});
});
}
functionupdateSum(idList,totalId)//更新统计值
{
varsum=0.0;
$.each(idList,function(j,item){
varid=item;
varvalue=$("#"+id).val();
if($.isNumeric(value))
{
sum+=parseFloat(value);
}
});
$("#"+totalId).val(sum);
}

2有了获取每一行的的文本框的思路后，在考虑每一列的思路，和获取每一行的思路基本相同，但在修改的过程中，发现还是有很多不同。

经过测试的代码如下
复制代码代码如下:
functionGetOneColumnAllChild(totalId,index)
{
varidList=[];
vartrList=$("#"+totalId).parent("td").parent("tr").parent().children("tr");////取统计文本框的父节点td的父节点tr的父节点table，然后再取table的子节点，得到所有tr
$.each(trList,function(i,n){//遍历所有的tr
vartdList=$(n).children("td")//
if(tdList.length>0)
{
varinputindex=0;
$.each(tdList,function(j,item){//遍历所有的td
//if(j==index)//由于<tdclass="tdrightwidth20"rowspan="4">直接支出</td>，导致如果这样取数据会出错，因为第一行多了一个td，其他含都比第一行少了一个td
//{
varinputList=$(item).children("input[type="text"]");
if(inputList.length>0){
$.each(inputList,function(k,iteminput){//遍历所有的文本框
varitem=$(iteminput);
if(item.hasClass("digital")){
inputindex++;
if(inputindex==index){//支取指定列的文本框
idList.push(item.attr("id"));
}
}
});//endinputList
}//endif(inputList.length>0)
});//endtdList
}//if(tdList.length>0)
});//endtrList
BindBlur(idList,totalId);
//varNameList=idList.join(",");
//alert(NameList);
}

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

相关文章