Hi grk2368,
Refer the below sample.
HTML
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:Button ID="btnSelect" runat="server" Text="Select" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<table border="1">
<tr>
<td>
Id
</td>
<td>
<asp:TextBox runat="server" ID="txtId" />
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox runat="server" ID="txtName" />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<asp:TextBox runat="server" ID="txtCountry" />
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=btnSelect]').on("click", function () {
var tr = $(this).closest('tr');
var id = $(tr).find('td').eq(0)[0].innerHTML;
var name = $(tr).find('td').eq(1)[0].innerHTML;
var country = $(tr).find('td').eq(2)[0].innerHTML;
$('#txtId').val(id.trim());
$('#txtName').val(name.trim());
$('#txtCountry').val(country.trim());
return false;
});
});
</script>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
HTML DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=btnSelect]').on("click", function () {
var tr = $(this).closest('tr');
var id = $(tr).find('td').eq(0)[0].innerHTML;
var name = $(tr).find('td').eq(1)[0].innerHTML;
var country = $(tr).find('td').eq(2)[0].innerHTML;
$('#txtId').val(id.trim());
$('#txtName').val(name.trim());
$('#txtCountry').val(country.trim());
return false;
});
});
</script>
<div>
<div>
<div>
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th scope="col">
Id
</th>
<th scope="col">
Name
</th>
<th scope="col">
Country
</th>
<th scope="col">
Action
</th>
</tr>
<tr>
<td>
1
</td>
<td>
John Hammond
</td>
<td>
United States
</td>
<td>
<input type="submit" name="GridView1$ctl02$btnSelect" value="Select" id="GridView1_btnSelect_0" />
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Mudassar Khan
</td>
<td>
India
</td>
<td>
<input type="submit" name="GridView1$ctl03$btnSelect" value="Select" id="GridView1_btnSelect_1" />
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Suzanne Mathews
</td>
<td>
France
</td>
<td>
<input type="submit" name="GridView1$ctl04$btnSelect" value="Select" id="GridView1_btnSelect_2" />
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Robert Schidner
</td>
<td>
Russia
</td>
<td>
<input type="submit" name="GridView1$ctl05$btnSelect" value="Select" id="GridView1_btnSelect_3" />
</td>
</tr>
</table>
</div>
<br />
<table>
<tr>
<td>
Id
</td>
<td>
<input name="txtId" type="text" id="txtId" />
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<input name="txtName" type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<input name="txtCountry" type="text" id="txtCountry" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Demo