repeater中有三个控件(两个Label,一个TextBox),两个Label分别用于显示单价和小计价格,TextBox用于让用户改变商品数量。
<td > <%-- 商品单价--%> <asp:Label ID="price" runat="server"><%# Eval("price") %></asp:Label></td> <td> <%--商品数量--%> <asp:TextBox ID="TextBox1" Width="20px" runat="server" Text='<%# Eval("num") %>'></asp:TextBox></td> <td> <%--价格小计--%> <asp:Label ID="count" runat="server"></asp:Label></td>
JQuery代码:
<script type="text/javascript" src="jquery/jquery-1.5.js"></script> <script type="text/javascript"> //初始价格 $(function(){ $("input[type=text]").each(function(i){ var num=$(this).val(); var price=parseFloat($("span[id$='price']:eq("+i+")").text()); $("span[id$='count']:eq("+i+")").text(function(){ return (num*price).toFixed(2);}) }) }) //改变数量后价格 $(function(){ $("input[type=text]").each(function(i){ $(this).blur(function(){ var price=parseFloat($("span[id$='price']:eq("+i+")").text()); var num=$(this).val(); $("span[id$='count']:eq("+i+")").text(function(){ return (num*price).toFixed(2);}) }) }) })