Pintar tablas con colores intercalados usando MooTools

Esto que voy a explicar a continuación puede realizarse de formas diferentes, incluso utilizando tecnologías de servidor como PHP. Se trata de pintar el fondo de las filas de una tabla intercalando los colores. En inglés se lo conoce como zebra stripe y es una técnica muy utilizada en internet.

En este caso, vamos a ver cómo realizarlo mediante MooTools, lo cual me da una buena excusa para explicar otras cosas sobre este framework.

Partimos de un documento HTML

Hay una tabla en el cuerpo del documento. En la sección de encabezado encontrarán cargada la librería de MooTools y un archivo donde está el script que vamos a realizar.

Ese script, que debe estar ubicado en el mismo directorio (para este caso), contiene lo siguiente:

La primera línea espera que se cargue todo el documento DOM para poder empezar a ejecutar el código. Luego, en la segunda línea ya estamos realizando cambios sobre la tabla. El operador $$ es el selector de MooTools y permite seleccionar cualquier elemento o elementos de la misma forma que se hace en CSS.

Aquí se está seleccionando todos los elementos tr de todas las tablas que cumplan con la pseudo clase que aparece escrita tras los dos puntos, en este caso even que se refiere únicamente a los elementos pares. Recuerden que los arreglos en Javascript (y en informática en general) comienzan en 0.

Luego, el método setStyle lleva dos parámetros: la propiedad que se desea alterar y el nuevo valor que se le quiere asignar. #c3c3c3 es el código hexadecimal de un color gris.

La siguiente línea es idéntica a la anterior, a excepción de la pseudo clase, que ahora es odd y se refiere a los elementos impares que sean seleccionados. También se le ha asignado otro color (otro tipo de gris).

Como ven, con even y odd se puede apuntar a los elementos pares e impares de la tabla y pintarlos de forma diferente.

El resultado es el siguiente: Tablas pintadas con colores intercalados.

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*