如何將數據從文本框復制到另一個文本框，在GridView中動態添加，而無需回發

Question

我已經在gridview中動態添加了n個文本框，並將其綁定到數據上 。 我希望函數/方法后面的代碼能夠在用戶更改任何文本框中的值的情況下將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();

在行上添加文本框控件：

 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

您可以在后面的代碼中創建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類添加到動態創建的TextBoxes中（添加此內容）：

TextBox101.CssClass = "txtBox";

另外，顯示總和的TextBox應該這樣命名：

TextBox102.ID = "total";

Answer 2

這是一個入門的小例子。 在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>