zoukankan      html  css  js  c++  java
  • 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;
    }

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

  • 相关阅读:
    《算法竞赛入门经典》《算法竞赛入门经典——训练之南》:勘误、讨论及代码
    codeforces 340B Maximal Area Quadrilateral(叉积)
    codeforces 340C Tourist Problem(简单数学题)
    codeforces 340A The Wall(简单数学题)
    UVALive 4043 Ants(二分图完美匹配)
    UVA 11865 Stream My Contest(最小树形图)
    UVA 11354 Bond(最小瓶颈路+倍增)
    UVALive 5713 Qin Shi Huang's National Road System(次小生成树)
    UVALive 3661 Animal Run(最短路解最小割)
    卡尔曼滤波器
  • 原文地址:https://www.cnblogs.com/Tsong/p/2507309.html
Copyright © 2011-2022 走看看