<!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> 