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">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
    </Columns>
</asp:GridView>
 
 
Namespaces
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;
        GridView1.DataBind();
    }
}
 
 
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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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")) {
                    $(this).addClass("selected_row");
                } else {
                    $(this).removeClass("selected_row");
                }
            });
        });
    });
</script>
 
 
CSS Classes used to style the GridView
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    td
    {
        cursor: pointer;
    }
    .selected_row
    {
        background-color: #A1DCF2;
    }
</style>
 
Change GridView Row Color using JavaScript when clicked in ASP.Net

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