Cómo resaltar las filas de un GridView con jQuery (event OnMouseOver)

En este artículo voy a explicar cómo resaltar las filas de un GridView cuando el usuario pasa el ratón sobre una fila, usando jQuery en ASP.Net.

Con el fin de implementar el resaltado de una fila en GridView, utilizaremos el evento Hover y jQuery, para que cuando el ratón se mueve sobre la fila del GridView su color de fondo cambie y la se vea resaltada y cuando el ratón se mueve fuera de la fila su color pase a al color original. Bueno sin más vamos a ver el ejemplo:

      <div>
            <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
                runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Nombre" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Country" HeaderText="Pais" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Mensaje" HeaderText="Mensaje" ItemStyle-Width="150" />
                </Columns>
            </asp:GridView>
        </div>

Imports System.Data
Partial Class GridHover_Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn(3) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country"), New DataColumn("Mensaje")})
            dt.Rows.Add(1, "José Hernández", "México", "Hola esto esta muy bueno")
            dt.Rows.Add(2, "Luis Felipe", "Cancun", "Comparte el artículo")
            dt.Rows.Add(3, "Carlos Antonio", "Baja California", "Que te parece este artículo?")
            dt.Rows.Add(4, "Juan Antonio", "Guerrero", "Tienes algun problema con programación?")
            dt.Rows.Add(5, "Jorge Ramirez", "Guadalajara", "Envianos tus comentarios")
            dt.Rows.Add(6, "Alan Pulido", "Monterrey", "Tienes algun problema con programación?")
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub
End Class

   <script type="text/javascript">
        $(function () {
            $("[id*=GridView1] td").hover(function () {
                $("td", $(this).closest("tr")).addClass("hover_row");
            }, function () {
                $("td", $(this).closest("tr")).removeClass("hover_row");
            });
        });
    </script>

   <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        td {
            cursor: pointer;
        }

        .hover_row {
            background-color: #A1DCF2;
        }
    </style>

Espero que te sea de utilidad este ejemplo y si tienes algún problema, dudas o sugerencias estoy a tus órdenes. Te agradecería muchísimo que puedas ayudarnos compartiendo este artículo con tus amigos y contactos.

El ejemplo lo puedes descargar en la siguiente liga: https://github.com/jiestrada/GridViewHover