首页 / JAVASCRIPT / js综合应用实例简单的表格统计

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js综合应用实例简单的表格统计，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6796字，纯文字阅读大概需要10分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的js综合应用实例简单的表格统计全部内容，希望文章能够帮你解决js综合应用实例简单的表格统计所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/365602.html

来源：【匿名】

【上一篇】js关闭浏览器窗口及检查浏览器关闭事件【下一篇】javascript 怎么调用php方法

更多 ►

【js综合应用实例简单的表格统计】教程文章相关的互联网学习教程文章

Javascript 字典应用实例【代码】

字典时一个很有用的工具，在之前C#项目中有经常使用，这篇博文主要讲解在Javascript中，字典的实际应用场景首先在JS中，是没有Dictionary‘类的，我们需要实现键值（KEY） -- 数值（VALUE）的对应关系，最好的办法就是用数组首先交代下背景，我需要根据数组里的站点编号，获取到对应的站点名称首先通过Thrift接口，获取到数据库里面的设备信息，通过Ajax传输到js页面，遍历数组PS : 数据结构如下：# 设备信息 struct Device{int i...

js内置对象正则表达式应用实例

本文主要和大家分享js内置对象正则表达式应用实例，主要以代码的方式和大家讲解，希望能帮助到大家。//1、身份证正则表达式验证function checkIdNo(){ var idno = $("#idno").val();//15位数身份证验证正则表达式：var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; //18位数身份证验证正则表达式：var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;if(!(isIDC...

js事件流以及扩展应用实例【图】

什么是事件流呢？本文主要和大家分享js事件流以及扩展应用实例，希望能帮助到大家。DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 ● 事件捕获阶段：实际目标（<p>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。上图中为1~3. ● 处于目标阶段：事件在<p>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。 ● 冒泡阶段：事件又传播回文档。 note: ...

js字符串的应用实例

本文主要和大家分享js字符串的应用实例，希望能帮助到大家。1.对称数对称数即一个数倒叙时，和原数值一样。例如：11，22，111等。现在利用所学js知识写一个取某范围内所有对称数的函数。 function reverseToNum(num){ //将该数值反转，取其反转后的值use strice;var num = num;var str = num.toString().split("");var reverseStr = str.reverse().join("");var reverseNum = Number(reverseStr);return reverseNum;}function isR...

js正则表达式的10个应用实例

js中正则表达式的10个应用实例1、找重复项最多的字符和个数[html] view plain copy<script> var str = sassdfdfffdasdffffffsdsdddsss; var arr = str.split();//先把字符串分割为字符串数组 str = arr.sort().join();对数组进行排序后再将数组转化为字符串 var value = ; var index = 0; var re = /(\w)\1+/g; str.replace(re,function($0,$1){ if(index<$0.length){ index = $0.length; value = $1; } }); alert(最...

vue构建多页面应用实例代码分享【图】

最近一直在研究使用vue做出来一些东西，但都是SPA的单页面应用，但实际工作中，单页面并不一定符合业务需求，所以这篇我就来说说怎么开发多页面的Vue应用，以及在这个过程会遇到的问题。本文主要和大家介绍用vue构建多页面应用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。这是我放在GitHub上的项目，里面有整个配置文件，可以参看一下：multiple-vue-page准备工作...

JShash制作单页Web应用实例分享

本文我们会先从hash是什么，hash有什么作用以及何为单页Web应用开始讲解，后面将会介绍到JS hash制作单页Web应用实例，希望能帮助到大家。一、何为hash这里要讲的hash（也叫哈希），指的是JS中location对象的hash属性，它返回的是URL中#后所跟的零个或多个字符。通常，我们可以通过location.hash的方式获取哈希值或设置哈希值。当然，我们也可以通过设置a标签的href属性来设置哈希值，当用户点击该a标签时即可改变页面的哈希值。例...

Webpack实战之构建Electron应用实例详解【图】

Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用，由 Github 主导和开源，大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。本文主要主要介绍Webpack实战之构建 Electron 应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。Electron 是 Node.js 和 Chromium 浏览器的结合体，用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI，通过 Node.js 去和...

JavaScriptdelete操作符应用实例_javascript技巧

今天在看prototype代码时发现了delete这个操作符代码如下:unset: function(key) { var value = this._object[key]; delete this._object[key]; return value; } 查了一下手册， delete 运算符从对象中删除一个属性，或从数组中删除一个元素。 delete expression expression 参数是一个有效的 JScript 表达式，通常是一个属性名或数组元素。说明如果 expression 的结果是一个对象，且在 expression 中指定的属性存在，而该对象...

javascripteval()应用实例select_javascript技巧

eval() [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript事件冒泡应用实例分析_javascript技巧【图】

然而，在今天一些大型的WEB交互项目中，比如大型的WebGame项目，JavaScript事件冒泡影响是值得重视的。本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项。如果你对JavaScript事件冒泡还没有什么印象，不妨先看看我之前写的一篇博客《JavaScript事件冒泡简介及应用》。本文讲究实用，不在对JavaScript事件冒泡基础知识进行过多的阐述。在文章开始之前，现在先看看下面这样一个需求：下面HTML假设描述的是一个WebGam...

Bootstarp布局组件应用实例讲解_javascript技巧

本文实例介绍了Bootstarp布局组件应用实践，分享给大家供大家参考，具体内容如下字体图标的应用示例下拉菜单示例主题下拉菜单标题选项1选项2 选项3分离的链接按钮工具栏与按钮组Button 1Button 2Button 3Button 4Button 5Button 6Button 7Button 8Button 9按钮下拉菜单默认功能另一个功能其他分离的链接表单中的输入框组以上就是关于Bootstarp布局组件应用的部分内容，希望对大家的学习有所帮助，继续关注。

javascript拖拽应用实例_javascript技巧【图】

之前文章中也讲了一下拖拽的基本思想，理论是有了，那实践呢，可以运用到什么地方呢？下面就给大家带来一个用拖拽思想写的一个小实例，供大家参考，大致效果看下图：就是这样一个简单的一个拖拽条，你可以把它理解为滚动条，也可以理解为表单中的数量选择控件，也可以理解为进度条，等等，反正你可以改成很多你想要的效果，废话不多说，我们来看看这个是怎么做的吧！想了想，感觉原理就不用说了吧，我在拖拽效果中就已经说的很清楚...

javascript拖拽应用实例（二）_javascript技巧【图】

经常在网站别人的网站的注册页中看到一个拖拽验证的效果，就是它的验证码刚开始不出来，而是有一个拖拽的条，你必须将这个拖拽条拖到底，验证码才出来，说了感觉跟没说一样，你还是不理解，好吧，我给个图你看看：这个是在万网的注册页中所截的图，大概的效果就是，当拖动那个拖拽框时，如果拖拽框没有拖到最右边，则拖拽框会移动到初始位置，如果拖动到最右边，则拖拽框显示为对勾，中间的文字也变了，但是我试了一下，他的验证码...

javascript针对DOM的应用实例（一）_DOM

我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果。所以我这里只教大家最实际，最有用的javascript应用。但是前提大家最好有一些javascript或者jquery的编程的基础。好废话不多说了。今天第一篇，就教大家如何用javascript获取页面中的dom元素。这个很重要。我会对照JQuery来讲。如果页面中的元素是ID属性 JQ的方法：$("#dom"), 原生js的方法：var a = document.getElementBy...

首页 / JAVASCRIPT / js综合应用实例简单的表格统计

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【js综合应用实例简单的表格统计】教程文章相关的互联网学习教程文章

实例 - 相关标签

统计 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程