Hola a todos, uno de los controles más utilizados es el GridView, con este control podemos hacer muchísimas cosas bastantes interesantes, pero su problema es que todo es del lado del servidor, sin embargo utilizando un lenguaje cliente como jQuery le podemos ir añadiendo funcionalidades como lo es el resaltar las filas y las columnas cuando se mueva el mouse sobre el GridView.

La idea es obtener algo como:

Imagen1

Como se puede apreciar en la imagen, la fila en donde ubico el mouse tiene un color amarillo claro, pero la celda en la que estoy parado tiene un amarillo mas fuerte, así el usuario sabrá exactamente donde tiene el cursor.

Ahora vamos a iniciar a desarrollar el ejemplo, el código de carga de datos del Grid no es relevante, pero en el ejemplo que dejo lo podrán revisar.

  1. Creamos un skin para darle un estilo al Grid:
1: <asp:GridViewrunat="server"SkinID="Professional"Font-Name="Verdana" 2: HeaderStyle-Height="35px"ItemStyle-Height="35px"Font-Size="10pt" 3: Cellpadding="4"HeaderStyle-BackColor="#444444"HeaderStyle-ForeColor="White" 4: />
  1. Creamos el HTML del GridView:
1:
2:

ASP.NET GridView y jQuery | Resaltando filas y celdas

3:
4: "grvDatos" runat="server" SkinID="Professional"> 5:
  1. Creamos una hoja de estilo para tener allí las clases css a utilizar:
1: .highlight 2: { 3: background-color:#F7F5CB; 4: } 5: .highlight-td 6: { 7: background-color:#E5DE78; 8: } 9: td 10: { 11: cursor:pointer; 12: }
  1. Referenciamos la hoja de estilos y la librería jQuery:
1: <linkhref="Estilo.css"rel="stylesheet"type="text/css"/> 2: <scriptsrc="scripts/jquery-1.6.2.min.js"type="text/javascript">script>
  1. Escribimos el “complicadísimo” código jQuery:
1:

Y ahora como funciona el código:

Simplemente con el selector $("#<%= grvDatos.ClientID %> tr") le decimos que tome los tr de nuestro Grid, como recordaran al renderizar el Grid realmente obtenemos una tabla, luego con la función hover en primera medida le debemos especificar una función que maneje el evento cuando el mouse esta sobre el elemento, allí lo que hacemos es agregar la clase highlight al tr, y en la segunda función que maneja el evento cuando el mouse sale lo que se hace es remover la clase añadida. Para el td funciona de la misma manera, solo que en ese caso agregamos es la clase highlight-td.

Espero les haya gustado, les dejo el código del ejemplo:

Descarga el ejemplo (se llama jQueryGridViewResaltado!