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

Estrada Web Group
Administrador
Cómo resaltar las filas de un GridView con jQuery (event  OnMouseOver)

curso java, curso asp.net, curso jquery

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:

El código HTML

      <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>

Código de servidor VB.NET

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

JavaScript

   <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>

CSS

   <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

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;