js GridView 实现自动计算操作代码


Posted in Javascript onMarch 25, 2009

注意下面的代码,需要加载jquery所以请大家自行到官方网站下载最新版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>js操作GridView,实现自动计算</title> 
<style type="text/css"><!-- 
table,tr,td{text-align:center;} 
input{width:50px;text-align:center;} --></style><style type="text/css" bogus="1"> table,tr,td{text-align:center;} 
input{width:50px;text-align:center;} 
</style> 
<script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery-1.2.6.pack.js"></script> 
<script type="text/javascript"><!-- 
//全局 
var tbl; 
//改变总金额与总数量 
function setTotal(){ 
var totalAmount=0;//总金额 
var totalCount=0;//总数量 
if(tbl!=null&&tbl.rows.length>2)//表头占一行 
{ 
for(var n=1;n<tbl.rows.length-1;n++)//rows数组是从0开始,表足占一行 
{ 
//总数量 
if(!isNaN(tbl.rows[n].cells[2].childNodes[0].value)) 
{ 
totalCount+=Number(tbl.rows[n].cells[2].childNodes[0].value); 
} 
//总金额 
if(!isNaN(tbl.rows[n].cells[3].innerText))//判断是不是数字 
{ 
totalAmount+=Number(tbl.rows[n].cells[3].innerText); 
} 
} 
} 
tbl.rows[tbl.rows.length-1].cells[2].innerText=totalCount; 
tbl.rows[tbl.rows.length-1].cells[3].innerText=totalAmount; 
} 
//单价改变,根据行号找到同一行的数量与金额, 
//这些值可以用index='<%#Container.DataItemIndex %>'绑定 
function fPrice(rowId,val){ 
tbl.rows[Number(rowId)].cells[3].innerText= 
Number(val)* Number(tbl.rows[Number(rowId)].cells[2].childNodes[0].value); 
} 
//数量改变 
function fCount(rowId,val){ 
tbl.rows[Number(rowId)].cells[3].innerText= 
Number(val)* Number(tbl.rows[Number(rowId)].cells[1].childNodes[0].value); 
} 
//限制只能输入数字 
function checknum() 
{ 
if((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||(event.keyCode>=96&&event.keyCode<=105) 
||event.keyCode==46||event.keyCode==37||event.keyCode==39||event.keyCode==190||event.keyCode==110) 
{ 
event.returnValue=true; 
} 
else 
{ 
event.returnValue=false; 
} 
} 
jQuery(function(){ 
//初始化table 
//tbl=document.getElementById("GridView1"); 
tbl=$("#GridView1").get(0);//返回DOM对象 
//对input键盘限制 
jQuery("input").keydown(function(){ 
checknum(); 
}).keyup(function(){ 
setTotal(); 
}); 
}); 
// --></script> 
</head> 
<body> 
<table id="GridView1" border="1"> 
<tr> 
<td>编号</td> 
<td>单价</td> 
<td>数量</td> 
<td>金额</td> 
</tr> 
<tr> 
<td>1</td> 
<td><input type="text" onkeyup="fPrice(1,this.value);" /></td> 
<td><input type="text" onkeyup="fCount(1,this.value);" /></td> 
<td></td> 
</tr> 
<tr> 
<td>2</td> 
<td><input type="text" onkeyup="fPrice(2,this.value);" /></td> 
<td><input type="text" onkeyup="fCount(2,this.value);"/></td> 
<td></td> 
</tr> 
<tr> 
<td>合计</td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 #Javascript
javascript 打印页面代码
Mar 24 #Javascript
jQuery 全选效果实现代码
Mar 23 #Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 #Javascript
javascript 对象定义方法 简单易学
Mar 22 #Javascript
JS array 数组详解
Mar 22 #Javascript
javascript multibox 全选
Mar 22 #Javascript
You might like
PHPCMS的使用小结
2010/09/20 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
DOM 事件流详解
2015/01/20 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
vuex state及mapState的基础用法详解
2018/04/19 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
Python环境变量设置方法
2016/08/28 Python
Python提取频域特征知识点浅析
2019/03/04 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
数据库测试通常都包括哪些方面
2015/11/30 面试题
军训自我鉴定
2013/12/14 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
python blinker 信号库
2022/05/04 Python