In this article I will explain how to change GridView Row Background Color using JavaScript when Row is clicked in ASP.Net
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two columns.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false">
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
You will need to import the following namespaces.
using System.Data;
Binding the GridView
I have made use of DataTable with some dummy values for this article.
protected void Page_Load(object sender, EventArgs e)
    if (!this.IsPostBack)
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), 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;
Changing the GridView Row Background color when clicked using JavaScript
In the below JavaScript code snippet, I have made use of jQuery to make the job easier.  Firstly I have attached JavaScript click event handler to the TD i.e. Cell of the GridView. When some GridView Cell within a Row is clicked, using the reference of the Cell the Row of the GridView is determined.
Then a loop is executed over all the GridView Rows and the selected_row CSS class is removed, and is applied to the Row to which the Cell belongs i.e. the Current Row that was clicked.
The selected_row CSS class is used to apply color to the GridView Row.
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    $(function () {
        $("[id*=GridView1] td").bind("click", function () {
            var row = $(this).parent();
            $("[id*=GridView1] tr").each(function () {
                if ($(this)[0] != row[0]) {
                    $("td", this).removeClass("selected_row");
            $("td", row).each(function () {
                if (!$(this).hasClass("selected_row")) {
                } else {
CSS Classes used to style the GridView
<style type="text/css">
        font-family: Arial;
        font-size: 10pt;
        cursor: pointer;
        background-color: #A1DCF2;
Change GridView Row Color using JavaScript when clicked in ASP.Net

Change GridView Row Color using JavaScript when clicked in ASP.Net