有三个TextBox控件,分别为单价,数量,金额,如何能输入完单价,数量后移开鼠标,金额项能直接显示计算结果
有三个TextBox控件,分别为单价,数量,金额,如何能输入完单价,数量后移开鼠标,金额框能直接显示计算结果
[解决办法]
你可以参考这个例子
<%@ Page Language="C#" AutoEventWireup="true" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { System.Data.DataTable dt = new System.Data.DataTable(); System.Data.DataRow dr; dt.Columns.Add(new System.Data.DataColumn("ProductCode", typeof(System.String))); dt.Columns.Add(new System.Data.DataColumn("ProductName", typeof(System.String))); dt.Columns.Add(new System.Data.DataColumn("MallPrice", typeof(System.Decimal))); dt.Columns.Add(new System.Data.DataColumn("Num", typeof(System.Int32))); dt.Columns.Add(new System.Data.DataColumn("Intergral", typeof(System.Int32))); dt.Columns.Add(new System.Data.DataColumn("ProImage", typeof(System.String))); System.Random rd = new System.Random(Environment.TickCount); ; for (int i = 0; i < 8; i++) { dr = dt.NewRow(); dr[0] = "孟" + i.ToString(); dr[1] = "孟孟" + i.ToString(); dr[2] = System.Math.Round(rd.NextDouble() * 100, 2); dr[3] = rd.Next(9999); dr[4] = i; dr[5] = "http://dotnet.aspx.cc/Images/meng.gif"; dt.Rows.Add(dr); } GridView1.DataSource = dt; GridView1.DataBind(); TotalPrice.Text = totalCount.ToString(); } } decimal totalCount = 0; protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { String n = DataBinder.Eval(e.Row.DataItem, "Num").ToString(); String price = DataBinder.Eval(e.Row.DataItem, "MallPrice").ToString(); int num = 0; Int32.TryParse(n, out num); decimal MallPrice = Convert.ToDecimal(price); totalCount += num * MallPrice; e.Row.Cells[6].Text = (num * MallPrice).ToString(); } } protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) { Response.Write("执行SQL DELETE ProductCode=" + GridView1.DataKeys[e.RowIndex].Value.ToString()); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <script type="text/javascript"> function jia(ele) { tr = ele.parentNode; while (tr.nodeType != 1 || tr.tagName != "TR") tr = tr.parentNode; num = tr.cells[5].getElementsByTagName("input")[0]; var t = parseInt(num.value, 10); if (isNaN(t)) num.value = 0; else num.value = t + 1; countRow(tr) } function jian(ele) { tr = ele.parentNode; while (tr.nodeType != 1 || tr.tagName != "TR") tr = tr.parentNode; num = tr.cells[5].getElementsByTagName("input")[0]; var t = parseInt(num.value, 10); if (isNaN(t)) num.value = 0; else { if (t < 1) return; num.value = t - 1; } countRow(tr) } function bian(ele) { tr = ele.parentNode; while (tr.nodeType != 1 || tr.tagName != "TR") tr = tr.parentNode; countRow(tr) } function countRow(row) { price = parseFloat(row.cells[3].innerHTML); if (isNaN(price)) { row.cells[6].innerHTML = "0" return; } num = row.cells[5].getElementsByTagName("input")[0]; t = parseInt(num.value, 10); if (isNaN(t)) t = 0; row.cells[6].innerHTML = roundPrice(price * t); CountAll(); } function CountAll() { var total = 0; table = document.getElementById('<%=GridView1.ClientID %>'); if (table.rows.length < 3) return; for (i = 1; i < table.rows.length; i++) { p = parseFloat(table.rows[i].cells[6].innerHTML); if (isNaN(p)) p = 0; total += p; } document.getElementById('<%=TotalPrice.ClientID %>').innerHTML = roundPrice(total); } function roundPrice(x) { return Math.round(x * 100) / 100; } </script></head><body> <form id="form1" runat="server"> <table> <tbody> <tr class="biao"><td> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductCode" Width="1052px" CssClass="No" OnRowDataBound="GridView1_RowDataBound" OnRowDeleting="GridView1_RowDeleting"> <Columns> <asp:BoundField DataField="ProductCode" HeaderText="商品编号"></asp:BoundField> <asp:ImageField DataAlternateTextField="ProImage" DataImageUrlField="ProImage" HeaderText="商品图片"> </asp:ImageField> <asp:BoundField DataField="ProductName" HeaderText="商品名称" /> <asp:TemplateField HeaderText="价格"> <ItemTemplate> <%#Eval("MallPrice") %> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Intergral" HeaderText="赠送积分" /> <asp:TemplateField HeaderText="商品数量"> <ItemTemplate> <a href="#" onclick="jian(this);return false;">-</a> <input type="text" id="num" value='<%#Eval("Num")%>' onchange="bian(this)" /> <a href="#" onclick="jia(this);return false;">+</a> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="小计"> <ItemTemplate> </ItemTemplate> </asp:TemplateField> <asp:CommandField HeaderText="删除次商品" ShowDeleteButton="True"> <ControlStyle BorderWidth="0px" Width="40px" /> </asp:CommandField> </Columns> </asp:GridView> </td></tr> </tbody> <tfoot> <tr><td colspan="6"> <asp:Label ID="Label1" runat="server"></asp:Label> 商品总金额: <span>¥<asp:Label ID="TotalPrice" runat="server"></asp:Label></span>元</td> </tr> </table> </form></body></html>
[解决办法]
后台代码更简单,
<asp:TextBox AutoPostBack="true" ID="x" runat="server" OnTextChanged="x_TextChanged"></asp:TextBox>
x_TextChanged事件里面去计算
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void XXX_TextChanged(object sender, EventArgs e)
{
TextBox3.Text = (int.Parse(TextBox1.Text) * int.Parse(TextBox2.Text)).ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox AutoPostBack="true" ID="TextBox1" runat="server" OnTextChanged="XXX_TextChanged"></asp:TextBox>
<asp:TextBox AutoPostBack="true" ID="TextBox2" runat="server" OnTextChanged="XXX_TextChanged"></asp:TextBox>
<asp:TextBox AutoPostBack="true" ID="TextBox3" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>