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;
}

因为代码是直接在 博客园 里面的编辑器输入的,并没调试过.....

 

posted @ 2012-05-18 10:15  Tsong Chen  阅读(1931)  评论(0编辑  收藏  举报