繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js GridView 实现自动计算操作代码
- Javascript
- 站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
- 用js实现的十进制的颜色值转换成十六进制的代码
- DHTML form validation
- js资料toString 方法
- js资料prototype 属性
- js实现的网站首页随机公告随机公告
- 一个效果写的HashTable代码
- 用js实现的一个Flash滚动轮换显示图片代码生成器
- 关于javascript函数的几个话题
- 极致之美——百行代码实现全新智能语言
- htm调用JS代码
- 斑马线效果代码
- 从新浪弄下来的全屏广告代码 与使用说明
- 用js实现预览待上传的本地图片
- 用javascript自动显示最后更新时间
- 表单提交时自动复制内容到剪贴板的js代码
- 用roll.js实现的图片自动滚动+鼠标触动的特效
- 一段js小代码，计算距春节还有多少天
- js中设计一段程序，让它能够打印自己的方法收集藏
- 自动生成文章摘要的代码[JavaScript 版本]
Javascript 中的 js GridView 实现自动计算操作代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 413 ::
收藏到网摘: 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
