登 录
<!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 />
抱歉!评论已关闭.