Repeater js文本框的計算


Repeater 在項目中的運用很多,常見的就是 Repeater 中一個TextBox(價格) 提供給用戶輸入,用戶輸入完畢之后,乘以某個系數(匯率)然后在賦值給同行的其他 TextBox(小計)。

最后一行對Repeater中所有小計進行疊加得到合計。

這邊是用Js/Jquery來實現。

前台:

 1 <table> 
 2 <tr><td>價格</td><td>匯率</td><td>小計</td></tr>
 3 <asp:Repeater ID="Rpt" runat="server">
 4    <ItemTemplate>
 5       <tr>
 6          <td>
 7       <asp:TextBox ID="txt1" onblur='txt1Onchange(this)' runat="server" />
 8       </td>
 9       <td>
10       <asp:Label ID="lbl" Text='<%# Eval("xxxx")%>' runat="server" /><!--綁定匯率-->
11       </td>
12       <td>
13       <asp:TextBox ID="txt2" runat="server" />
14          </td>
15       </tr>
16    </ItemTemplate>
17 </asp:Repeater>  
18 <tr>
    <
td></td>
    <
td></td>
    <
td><asp:TextBox ID="txt3" runat="server" /></td></tr><!--合計--> 19 </table>

JavaScript:

function onblur(control){
      //對小計文本框賦值
      var td=contorl.parentNode.parentNode;//得到該控件所在的td
      var tr=td.parentNode;//得到tr
       var txt1= $($(tr).children('td').eq(0).children('input')).val(); //金額
       var lbl= $($(tr).children('td').eq(1).children('input')).val(); //匯率
       $($(tr).children('td').eq(2).children('input')).val(Number(txt1)*Number(lbl)); //小計
    
      //對總計賦值,Rpt在前台生成的是table,for循環整個table,第一行(標題)和 最后一行(小計)不累加
      var table = tr.parentNode;//得到 table
      var count=0;
      for(var i=1;i<$(table).children('tr').length-1;i++){
         count = Number(count) + Number($($(table).children('tr').eq(i).children('td').eq(2).children('input')).val());//得到Rpt循環中的小計,進行累加
      }
     
      //對總計賦值,需要主要的是如果使用了模板頁,這時候總計的ID就不是txt3了,需要在瀏覽器瀏覽的時候查看源文件,確定txt3前台生成的ID
      document.getElementById("txt3").value=count;
}

因為代碼是直接在 博客園 里面的編輯器輸入的,並沒調試過.....

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com