Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

Gridview row color change on MouseOver using jQuery

Viewed:  3613 
Posted On:  24/04/2013 08:09:06 
How to change GridView row back color on mouse hover using jQuery..? 

In this article I am going to show how we can make a mouse hover color change in a GridView with the help of jQuery...

My Output is:


Image 1.

Now mouse hover on any row...

Image 2.

aspx is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head id="Head1" runat="server">
    <title>GridView Row Color change on MouseHover...</title>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
        $('#GridEmployee tr:has(td)').mouseover(function() {
        $('#GridEmployee tr').mouseout(function() {
    <style type="text/css">
            background-color: #48CCCD;
            text-decoration: underline;
            cursor: pointer;
    <form id="form1" runat="server">
        <table cellpadding="20" cellspacing="20" width="50%" align="center" border="2">
                <td align="center">
                    <asp:GridView runat="server" ID="GridEmployee" AutoGenerateColumns="False" HeaderStyle-BackColor="#7779AF"
                        HeaderStyle-ForeColor="White" CellPadding="4" ForeColor="#333333" GridLines="None">
                            <asp:BoundField DataField="EmployeeNo" HeaderText="EmployeeNo" />
                            <asp:BoundField DataField="Name" HeaderText="Name" />
                            <asp:BoundField DataField="EmployeeCode" HeaderText="EmployeeCode" />
                            <asp:BoundField DataField="Keywords" HeaderText="Keywords" />
                            <asp:BoundField DataField="Mobile" HeaderText="Mobile" />
                            <asp:BoundField DataField="Country" HeaderText="Country" />
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True"></HeaderStyle>


aspx.cs is:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
    SqlDataAdapter da;
    DataSet ds = new DataSet();
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    private void BindData()
        SqlConnection con = new SqlConnection(@"Server=.;Database=Test;Integrated Security=true;");
        SqlCommand cmd = new SqlCommand("SELECT  * FROM Employee", con);
            da = new SqlDataAdapter(cmd);
            if (!object.Equals(ds.Tables[0], null))
                if (ds.Tables[0].Rows.Count > 0)
                    GridEmployee.DataSource = ds.Tables[0];
                    GridEmployee.DataSource = null;
                GridEmployee.DataSource = null;
        catch (Exception ex)

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us