繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js GridView 实现自动计算操作代码
- Javascript
- JS 文件本身编码转换 图文教程
- jQuery Ajax之$.get()方法和$.post()方法
- jQuery Ajax之load()方法
- JavaScript 核心参考教程 内置对象
- JavaScript 核心参考教程 RegExp对象
- javascript hashtable实现代码
- 百度留言本js 大家可以参考下
- javascript 判断某年某月有多少天的实现代码 推荐
- 让iframe子窗体取父窗体地址栏参数(querystring)
- jquery pagination插件实现无刷新分页代码
- jQuery与javascript对照学习 获取父子前后元素 实现代码
- 通用javascript脚本函数库 方便开发
- JQuery 绑定事件时传递参数的实现方法
- 支持IE,Firefox的javascript 日历控件
- javascript 变速加数功能实现代码
- extjs 学习笔记（一） 一些基础知识
- extjs 学习笔记（二） Ext.Element类
- Jquery 学习笔记（一）
- 一些技巧性实用js代码小结
- jquery 常用操作整理 基础入门篇
Javascript 中的 js GridView 实现自动计算操作代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 269 ::
收藏到网摘: n/a
js操作GridView,实现自动计算的实现代码，下面的代码运行即可
注意下面的代码，需要加载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.ruanchen.com/"></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>
评论 (0) All
