有三個TextBox控件,分別為單價,數量,金額,如何能輸入完單價,數量后移開鼠標,金額項能直接顯示計算結果


有三個TextBox控件,分別為單價,數量,金額,如何能輸入完單價,數量后移開鼠標,金額框能直接顯示計算結果

4 个解决方案

#1


補充:在后台代碼中完成

#2


你可以參考這個例子
<%@ 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>

#3


本帖最后由 net_lover 於 2012-04-14 16:18:53 編輯
后台代碼更簡單,
<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>

#4


已解決

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com