有三个TextBox控件，分别为单价，数量，金额，怎么能输入完单价，数量后移开鼠标，金额项能直接显示计算结果

有三个TextBox控件，分别为单价，数量，金额，如何能输入完单价，数量后移开鼠标，金额项能直接显示计算结果
有三个TextBox控件，分别为单价，数量，金额，如何能输入完单价，数量后移开鼠标，金额框能直接显示计算结果

------解决方案--------------------
你可以参考这个例子

HTML code

<%@ 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>

有三个TextBox控件，分别为单价，数量，金额，怎么能输入完单价，数量后移开鼠标，金额项能直接显示计算结果

相关推荐