返回首頁
當前位置: 主頁 > 網絡編程 > .Net實例教程 >

實現js計算gridview模板列textbox值程序代碼

時間:2010-08-12 22:31來源:知行網www.aotfjk.live 編輯:麥田守望者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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>
<mce:style type="text/css"><!--
table,tr,td{text-align:center;}
input{width:50px;text-align:center;}

--></mce:style><style type="text/css" mce_bogus="1"> table,tr,td{text-align:center;}
input{width:50px;text-align:center;}
</style>
<mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce: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();
});
});

// --></mce: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>

 

------分隔線----------------------------
標簽(Tag):ASP.NET asp.Net實例教程 ASP.NET教程 ASP.NET代碼
------分隔線----------------------------
推薦內容
猜你感興趣
湖南刘雪龙黑彩