Asp.net C# 使用 Javascript 将数据从 gridview 显示到 TextBox

Posted 2023-04-12

【中文标题】Asp.net C# 使用 Javascript 将数据从 gridview 显示到 TextBox

【英文标题】：Asp.net C# display data from gridview to TextBox using Javascript

【发布时间】：2021-12-15 11:46:51

【问题描述】：

我有一个简单的 gridview，其中包含 userID 和 user_name 以及每行中的一个选择按钮，

我创建了一个 javascript 函数，通过单击选择按钮显示用户 ID 和用户名，从 gridview 到 asp.net Texboxe 用户 ID 和 Texboxe 用户名，它工作正常，

但不是在每一行上使用多个按钮，我想使用一个按钮，它可以根据 Texboxe 用户 ID 值上的值执行相同的操作，

例如，如果我在 Texboxe 用户 ID 上键入用户 ID (1)，然后单击它显示的单个按钮，则会在 Texboxe 用户名上显示用户名

  <asp:GridView runat="server" ID="GridView11" AutoGenerateColumns="false" Width="290px" DataSourceID="SqlDataSource11" CssClass="GridviewDiv">
                            <HeaderStyle CssClass="headerstyle" Height="40px" />
                            <Columns>
                 <asp:BoundField DataField="user_name" HeaderText="user ID"/>

                <asp:TemplateField HeaderText="user name" >
                       <ItemTemplate>
                            <asp:Label ID="Label27" Text='<%#  Eval("user_name")  %>' runat ="server" />
                       </ItemTemplate>
                       </asp:TemplateField>

                  <asp:TemplateField>
           <ItemTemplate>                                                                                                                                               
                       <asp:Button ID="ButtonSelect" runat="server" ClientIDMode="Static"  Text='Select'  OnClientClick = "return GetSelectedRow(this)"  />

              </ItemTemplate>
             </asp:TemplateField>

                            </Columns>
                        </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource11" runat="server" ConnectionString="<%$ ConnectionStrings:MydbConnectionString2 %>" SelectCommand="SELECT [user_ID], [user_name] FROM users_table"></asp:SqlDataSource>





                function GetSelectedRow(UserLink) 
                    var row = UserLink.parentNode.parentNode;

                    var Userid = row.cells[0].innerhtml;
                    var UseriName= row.cells[1].getElementsByTagName("span")[0].innerHTML;

                     //document.getElementById("TextBox_user_id").value = Userid;

                     document.getElementById("TextBox_user_name").value = UseriName;

                    return false;

                

【参考方案1】：

你可以这样使用...

   function GetSelectedRow(UserLink) 
                            var row = UserLink.parentNode.parentNode;
                            var i = row.rowIndex;                           
                            var grid1=document.getElementById("GridView11");
                            var Userid = grid1.row[i].cells[0].innerHTML;
                            var UseriName= grid1.rows[i].cells[1].getElementsByTagName("span")[0].innerHTML;
        
                             //document.getElementById("TextBox_user_id").value = Userid;
        
                             document.getElementById("TextBox_user_name").value = UseriName;
        
                            return false;