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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
javaScript基础详解
2017/01/19 Javascript
ECMAScript6--解构
2017/03/30 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python实现一个简单的验证码程序
2017/11/03 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
智能电子应届生求职信
2013/11/10 职场文书
保险专业自荐信范文
2014/02/20 职场文书
文秘应届生求职信
2014/07/05 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
go语言map与string的相互转换的实现
2021/04/07 Golang
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android