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; }
因为代码是直接在 博客园 里面的编辑器输入的,并没调试过.....