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

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

  • 相关阅读:
    VMWARE Linux环境下如何设置共享文件夹?
    linux本地源#如何挂载本地iso镜像作为本地源
    centos7修改系统语言为简体中文
    Redhat镜像-RHEL-官方镜像下载大全
    如何连接到Oracle数据库?
    Oracle 数据库创建导入
    Oracle 12C安装教程
    Oracle 11g安装
    Linux下安装Oracle11g服务器
    Oracle简介
  • 原文地址:https://www.cnblogs.com/Tsong/p/2507309.html
Copyright © 2020-2023  润新知