首頁 > 開發者 > JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" ><br /><head><br /> <title>js操作GridView,實現自動計算</title><br /> <mce:style type="text/css"><!--<br /> table,tr,td{text-align:center;}<br /> input{width:50px;text-align:center;}</p><p>--></mce:style><style type="text/css" mce_bogus="1"> table,tr,td{text-align:center;}<br /> input{width:50px;text-align:center;}<br /> </style><br /> <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script><br /> <mce:script type="text/javascript"><!--<br /> //全域<br /> var tbl;<br /> //改變總金額與總數量<br /> function setTotal(){<br /> var totalAmount=0;//總金額<br /> var totalCount=0;//總數量<br /> if(tbl!=null&&tbl.rows.length>2)//表頭佔一行<br /> {<br /> for(var n=1;n<tbl.rows.length-1;n++)//rows數組是從0開始,表足佔一行<br /> {<br /> //總數量<br /> if(!isNaN(tbl.rows[n].cells[2].childNodes[0].value))<br /> {<br /> totalCount+=Number(tbl.rows[n].cells[2].childNodes[0].value);<br /> }<br /> //總金額<br /> if(!isNaN(tbl.rows[n].cells[3].innerText))//判斷是不是數字<br /> {<br /> totalAmount+=Number(tbl.rows[n].cells[3].innerText);<br /> }<br /> }<br /> }<br /> tbl.rows[tbl.rows.length-1].cells[2].innerText=totalCount;<br /> tbl.rows[tbl.rows.length-1].cells[3].innerText=totalAmount;<br /> }<br /> //單價改變,根據行號找到同一行的數量與金額,<br /> //這些值可以用index='<%#Container.DataItemIndex %>'綁定<br /> function fPrice(rowId,val){<br /> tbl.rows[Number(rowId)].cells[3].innerText=<br /> Number(val)* Number(tbl.rows[Number(rowId)].cells[2].childNodes[0].value);<br /> }<br /> //數量改變<br /> function fCount(rowId,val){<br /> tbl.rows[Number(rowId)].cells[3].innerText=<br /> Number(val)* Number(tbl.rows[Number(rowId)].cells[1].childNodes[0].value);<br /> }<br /> //限制只能輸入數字<br /> function checknum()<br /> {<br /> if((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||(event.keyCode>=96&&event.keyCode<=105)<br /> ||event.keyCode==46||event.keyCode==37||event.keyCode==39||event.keyCode==190||event.keyCode==110)<br /> {<br /> event.returnValue=true;<br /> }<br /> else<br /> {<br /> event.returnValue=false;<br /> }</p><p> }<br /> jQuery(function(){<br /> //初始化table<br /> //tbl=document.getElementById("GridView1");<br /> tbl=$("#GridView1").get(0);//返回DOM對象<br /> //對input鍵盤限制<br /> jQuery("input").keydown(function(){<br /> checknum();<br /> }).keyup(function(){<br /> setTotal();<br /> });<br /> });</p><p>// --></mce:script><br /></head><br /><body><br /><table id="GridView1" border="1"><br /> <tr><br /> <td>編號</td><br /> <td>單價</td><br /> <td>數量</td><br /> <td>金額</td><br /> </tr><br /> <tr><br /> <td>1</td><br /> <td><input type="text" onkeyup="fPrice(1,this.value);" /></td><br /> <td><input type="text" onkeyup="fCount(1,this.value);" /></td><br /> <td></td><br /> </tr><br /> <tr><br /> <td>2</td><br /> <td><input type="text" onkeyup="fPrice(2,this.value);" /></td><br /> <td><input type="text" onkeyup="fCount(2,this.value);"/></td><br /> <td></td><br /> </tr><br /> <tr><br /> <td>合計</td><br /> <td></td><br /> <td></td><br /> <td></td><br /> </tr><br /></table><br /></body><br /></html><br />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
