Éste es un ejemplo contundente de la elegancia y sencillez a la que se puede llegar al utilizar jQuery como framework de desarrollo para javascript. Con sólamente dos líneas de código podemos tener las filas de nuestras tablas pintadas alternadamente y además un efecto de rollover al pasar sobre cada fila. Esto es lo que se conoce como tabla Zebra o Zebra table.

El código jQuery a utilizar es el siguiente:


$(".stripeMe tr").mouseover(function() {


$(this).addClass("over");

}).mouseout(function() {


$(this).removeClass("over");

});
$(".stripeMe tr:even").addClass("alt");

Las tablas a las que quieran agreagar el efecto deben tener la clase “stripMe”. Si quieren tener una fila encabezado de la tabla a la cual no se le aplique el efecto, deben utilizar thead y tfoot para el footer.

Los estilos a utilizar para pintar las filas son: alt y over . Como ven en el código, a las filas impares se le aplica el esitlo “alt” mientras que el estilo “over” es utilizado para destacar las filas cuando el mouse pasa sobre ellas.

Para leer más acerca de esta técnica, pueden visitar este sitio

Guardado en : Javascript, Programación, jQuery por admin