js GridView 實現自動計算作業碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

注意下面的代碼，需要載入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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More