Note the following code that needs to load jquery so please go to the official website to download the latest version.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>js operation GridView, implementation of automatic calculation </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" ><!--
Global
var tbl;
Change total amount and total quantity
function Settotal () {
var totalamount=0;//total Amount
Total number of Var totalcount=0;//
if (TBL!=NULL&&TBL.ROWS.LENGTH>2)//table header occupies one row
{
for (Var n=1;n<tbl.rows.length-1;n++)//rows Array is starting from 0, the table is a row
{
Total quantity
if (!isnan (Tbl.rows[n].cells[2].childnodes[0].value))
{
Totalcount+=number (Tbl.rows[n].cells[2].childnodes[0].value);
}
Total Amount
if (!isnan (Tbl.rows[n].cells[3].innertext))//Judge is not a number
{
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;
}
Unit price change, according to line number to find the same line of quantity and amount,
These values can be index= ' <% #Container. Dataitemindex%> ' bindings
function Fprice (rowid,val) {
Tbl.rows[number (rowId)].cells[3].innertext=
Number (val) * Number (Tbl.rows[number (rowId)].cells[2].childnodes[0].value);
}
Quantity change
function Fcount (rowid,val) {
Tbl.rows[number (rowId)].cells[3].innertext=
Number (val) * Number (Tbl.rows[number (rowId)].cells[1].childnodes[0].value);
}
Limit can only enter numbers
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 () {
Initialize table
Tbl=document.getelementbyid ("GridView1");
tbl=$ ("#GridView1"). Get (0);//Return DOM object
Restrictions on input keyboard
JQuery ("Input"). KeyDown (function () {
Checknum ();
}). KeyUp (function () {
Settotal ();
});
});
--></script>
<body>
<table id= "GridView1" border= "1" >
<tr>
<td> number </td>
<td> Price </td>
<td> Quantity </td>
<td> Amount </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> Total </td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
