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.jb51.net/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>

赞 (0)

相关推荐

  • 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" &g

  • asp.net gridview实现全选,反选与删除记录的操作代码

    gridview全选操作 复制代码 代码如下: 'columns'=>array( array( 'class'=>'CCheckBoxColumn', //'header'=>'全选', //'value'=>'$data->id', //'checked'=>'true', 'htmlOptions'=>array( 'width'=>'30', 'style'=>'text-align:center', ), ), 复制代码 代码如下: <

  • JS switch判断 三目运算 while 及 属性操作代码

    三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) { box.style.display = "block"; } else { box.style.display = "none"; } 三目运算替代if box.style.display = isHide?"block":"none&

  • YII2框架中ActiveDataProvider与GridView的配合使用操作示例

    本文实例讲述了YII2框架中ActiveDataProvider与GridView的配合使用操作.分享给大家供大家参考,具体如下: YII2中ActiveDataProvider可以使用yii\db\Query或yii\db\ActiveQuery的对象,方便我们构造复杂的查询筛选语句. 配合强大的GridView,快速的显示我们想要的数据. 通过上面的两个工具,我们快速的显示用户表信息.用户表结构如下: 我们创建一个用户模型MyUser.php,代码如下: <?php namespace ap

  • JavaScript对象链式操作代码(jquery)

    虽然现在慢慢减少了对jQuery的使用(项目上还是用,效率高点.平时基本不用了),希望从而减少对jQuery的依赖度. 但是这链式操作的方式实在吸引人(貌似现在不少新库都采用了链式操作). 新手无畏嘛,所以写了以下代码.主要是避免以后又忘了,呵呵. 复制代码 代码如下: window.k = function() { return new k.fn.init(arguments); } k.fn = k.prototype = { init:function() { this.length =

  • JS实现直接运行html代码的方法

    JS实现直接运行html代码的方法

    本文实例讲述了JS实现直接运行html代码的方法.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>直接运行 html 代码</title> </head> <body> <textarea style='width:300px;height:200px;' id='txtCode'&

  • JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin

  • 封装好的js判断操作系统与浏览器代码分享

    摘要: 对于前端开发我们最重要的工作就是兼容性,系统的兼容性,浏览器的兼容性等等.今天分享一个我在项目中封装的判断操作系统与浏览器的方法. 操作系统: var os = (function() { var UserAgent = navigator.userAgent.toLowerCase(); return { isIpad : /ipad/.test(UserAgent), isIphone : /iphone os/.test(UserAgent), isAndroid : /andro

  • 使用vue与jquery实时监听用户输入状态的操作代码

    实现效果:input未输入值,按钮禁用 jquery操作代码: html <input type="text" name="" placeholder="请输入用户名" id="userName" > <button class="disabled" id="login">登录</button> css .disabled { pointer-even

  • 关于jQuery里prev()的简单操作代码

    prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略.这里给大家介绍jQuery里prev()的简单操作,具体内容如下: 一个朋友提了个需求给我:点击按钮删除input,如果input剩一个,点击按钮全部消失. 很简单的操作,但是你如果不知道jquery里有prev()这个方法,可能你会走很多弯路. 代码: html <div> <input type="text" placeholder="用户名"&

随机推荐