javascript - 如何使用javascript将文本框值插入gridview

Question

我有两个文本框，一个按钮和网格视图。

我想要的很简单，每当我单击按钮时，文本框中的值都会插入到网格视图中。

我需要这个 b'cs 的 javascript 我是 javascript 的新手。

Answer 1

上周末在帮助我的一位朋友完成他的项目时，我需要在 asp.net gridview 上执行行级客户端操作。首先，我在 google 上搜索了类似于 asp gridview 的“excel 中的公式”的内容。当我找不到好的东西时，我决定使用 javascript 对单个 gridview 行执行客户端操作。

我的场景是发票表生成，其中需要动态添加行（每个选择的产品一个），然后执行一些计算，例如显示逐行总计。单击“添加”按钮后，将添加下拉列表中选择的项目的新记录（这是从服务器端代码完成的）。在这里，用户可以在任何文本框中输入值。并且系统必须相应地更新 Total Excessible Value 列文本框中的值（见下图）。

为此，我编写了两个普通的 javascript 函数，并在文本框的 onchange 事件中调用它们。下面是我使用的网格视图和 jquery 代码。

（点击放大）

我使用的 GridView 如下：

<asp:GridView ID="gdvInvoiceItems" runat="server" AutoGenerateColumns="False" ShowHeader="true"
        OnRowCommand="gdvInvoiceItems_RowCommand">
        <EmptyDataTemplate>
            No items added yet.
        EmptyDataTemplate>
        <Columns>
            <asp:TemplateField HeaderText="S No.">
                <ItemTemplate>
                    <%# Container.DataItemIndex + 1 %>
                    <asp:HiddenField ID="hdnItemId" runat="server" Value='<%# Eval("Id") %>' />
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Description of Goods" ItemStyle-CssClass="description">
                <ItemTemplate>
                    <asp:TextBox ID="txtDescription" runat="server" Text='<%# Eval("Description") %>'
                        CssClass="txtDescStyle">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity(Net)" ItemStyle-CssClass="quantity">
                <ItemTemplate>
                    <asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>' onchange="javascript:Multiply(this, this.value)">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Value Per Unit" ItemStyle-CssClass="value">
                <ItemTemplate>
                    <asp:TextBox ID="txtValue" runat="server" Text='<%# Eval("PerUnitValue") %>' onchange="javascript:Multiply(this, this.value)">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Total Exesible Value" ItemStyle-CssClass="exesiblevalue">
                <ItemTemplate>
                    <asp:TextBox ID="txtTotalExeValue" runat="server" Text='<%# Eval("Total") %>' CssClass="TotalExeValue">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkBtnRemove" runat="server" Text="Remove" ItemStyle-CssClass="remove">
                    asp:LinkButton>
                ItemTemplate>
            asp:TemplateField>
        Columns>
    asp:GridView>

使用的 JavaScript 代码：

<script type="text/javascript">
      //This method is called when quantity/cost textbox looses focus with some change in content
      function Multiply(element, val)
      {
          var otherElementName = '';
          var finalElementName = '';

          //id of calling element i.e, quantity/cost textbox
          var elementName = element.id;

        //get second element, i.e., get quantity if change is in cost and vice-versa
          if(endsWith(elementName, "txtQuantity"))
          {
              otherElementName = elementName.replace("txtQuantity", "txtValue");
          }
          else if(endsWith(elementName, "txtValue"))
          {
              otherElementName = elementName.replace("txtValue", "txtQuantity");
          }    
          var otherElement = document.getElementById(otherElementName);

          //get textbox where final value is to be displayed
        finalElementName = elementName.replace("txtValue", "txtTotalExeValue")         
          var finalElement = document.getElementById(finalElementName);
          finalElement.value = otherElement.value * val;
      }

      //checks if given string ends with given suffix
      function endsWith(str, suffix) {
        return str.indexOf(suffix, str.length - suffix.length) !== -1;
    }

    script>

突出显示的行 onchange="javascript:Multiply(this, this.value)" 是正在发挥作用的行。这个 onchange 事件不是智能感知的，但它可以工作。

Answer 2

这就是你所需要的，不需要额外的 js 功能，使用 CompareValidator。模板字段应具有 EditItemTemplate 和一些控件绑定 ( <%# Bind(...) %>) 到数据源中的字段

  <asp:TemplateField HeaderText="Units In Stock">
    <EditItemTemplate>
       <asp:TextBox ID="editUnitsInStock" Runat="server" 
             Text='<%# Bind("UnitsInStock") %>' Columns="4"></asp:TextBox>
       <asp:CompareValidator ID="CompareValidator2" Runat="server" ErrorMessage="You must provide a valid integer for Units In Stock."
            ControlToValidate="editUnitsInStock" 
            Operator="DataTypeCheck" Type="Integer">*</asp:CompareValidator>
                </EditItemTemplate>

Answer 3

请参考此代码。它会对你有所帮助。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
  function copyTextValue(bf) {
                if(bf.checked)
                      var text1 = document.getElementById("Name1").value;
                else
                      text1='';
                document.getElementById("Name2").value = text1;
                document.getElementById("Name3").value=text1;

                }
        </script>
</head>
<body>


       <input type="checkbox" name="check1" onchange="copyTextValue(this);"/>
<input id="Name1"><input id="Name2"><input id="Name3">


</body>
</html>