如何将数据从文本框复制到另一个文本框，在gridview中动态添加，无需回发

Question

我在gridview中动态添加了n个文本框并将数据绑定到它们。如果用户更改任何文本框中的值，我想要函数/方法后面的代码对 textboxtotal 中的 textbox1、textbox2 .....textboxn 求和。我无法使用这些文本框添加回发，因为在回发文本框被处理之后。

动态添加列到 Gridview 的代码

  foreach (string a in crcl)
            {

                SqlCommand cmd1 = new SqlCommand("select qty from purchaseinstruction where project ='" + DropDownList1.SelectedItem.ToString() + "' AND circle = '" + a + "' AND item = 'BIFURCATION' AND material = '" + mat + "'", agr);
                SqlDataReader dr1 = cmd1.ExecuteReader();
                if (dr1.Read())
                {
                    string val = dr1[0].ToString();
                    if (val.Length > 0)
                    {
                        row[a] = val;
                        value = value + decimal.Parse(val);
                    }
                    else
                    {
                        row[a] = 0;
                    }
                }
                else
                {
                    row[a] = 0;
                }
                dr1.Dispose();
                row["TOTAL"] = value;
            }                
            dt.Rows.Add(row);
 GridView1.DataSource = dt;
        GridView1.DataBind();

在 rowbound 上添加 Textbox 控件：

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    int i = 3;
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        crcl = (List<string>)ViewState["bdi2"];
        foreach(string a in crcl)
        {
            TextBox TextBox101 = new TextBox();
            TextBox101.ID=a;
            TextBox101.Width = 60;
            TextBox101.Text = (e.Row.DataItem as DataRowView).Row[a].ToString();
            e.Row.Cells[i].Controls.Add(TextBox101);
            i++;
        }
        TextBox TextBox102 = new TextBox();
        TextBox102.ID = "TOTAL";
        TextBox102.Width = 60;
        TextBox102.Text = (e.Row.DataItem as DataRowView).Row["TOTAL"].ToString();
        e.Row.Cells[i].Controls.Add(TextBox102);
    }
}

Answer 1

这里有一个小例子可以帮助您入门。将唯一的类名添加到 GridView 中的 TextBoxes。然后jQuery可以将onblur事件绑定到它们。

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" CssClass="GridTextBox"></asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server" CssClass="GridTextBox"></asp:TextBox>
                <asp:TextBox ID="TextBox3" runat="server" CssClass="GridTextBox"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

这里是当 TextBox 失去焦点时调用的 javascript 函数。 首先将触发事件的 TextBox 的 ID 拆分为几块，以获取该行中其他两个 TextBox 的 ID ( 在我的情况下，ID 看起来像这样ContentPlaceHolder1_GridView1_TextBox1_0)。 然后只需添加值即可。

<script type="text/javascript">
    $(document).ready(function () {
        $('.GridTextBox').blur(function () {
            var idString = this.id.split("_");
            var tb1 = idString[0] + "_" + idString[1] + "_TextBox1_" + idString[3];
            var tb2 = idString[0] + "_" + idString[1] + "_TextBox2_" + idString[3];
            var tb3 = idString[0] + "_" + idString[1] + "_TextBox3_" + idString[3];
            var total = parseInt($("#" + tb1).val()) + parseInt($("#" + tb2).val());
            if (!isNaN(total)) {
                $("#" + tb3).val(total);
            }
        });
    });
</script>

Answer 2

您可以在后面的代码中创建 Javascript 函数，如下所示（如果您使用的是 WebForms）：

string myScript = "function sumTextBoxes() { var arr = document.getElementsByClassName('txtBox');\n";
       myScript += "var total=0;\n";
       myScript += "for(var i=0;i<arr.length;i++){\n";
       myScript += "if(parseInt(arr[i].value))\n";
       myScript += "total += parseInt(arr[i].value);}\n";
       myScript += "document.getElementById('total').value = total;}\n";
Page.ClientScript.RegisterStartupScript(this.GetType(), "myKey", myScript, true);

现在，将 css 类添加到您动态创建的文本框（添加这个）：

TextBox101.CssClass = "txtBox";

另外，显示总和的 TextBox 应该这样命名：

TextBox102.ID = "total";