Zebra tables con MooTools

heySilver / BlogoEdad / Themes en Español / WikiNovela / iMeneame / geekTest / WpAdminThemes

Martes ~ Agosto 14, 2007

Zebra tables con MooTools

La zebra tables, son aquellas que podemos ver en cualquier sitio en el que se diferencian las filas (o columnas) con colores. Generalmente con el típico patrón de uno si, uno no

Ahora con MooTools eso es tan simple como insertar ~~2 líneas~~ 1 línea de código a tu Javascript. Estas líneas se encargarán de encontrar las filas de nuestra tabla definida por una clase y le vamos añadiendo una clase al <tr /> que condicionará el color de nuestra fila.

$$('table.shade-table tr').each(function(el, count) {el.addClass(count % 2 == 0 ? 'odd' : 'even');});

Solo nos quedará el definir las clases que darán color a nuestras filas, para ello lo haremos añadiendo 2 estilos CSS en nuestro fichero de estilos.

.odd       { background:#ccc; padding:3px; }
.even      { background:#eee; padding:3px; }

Gracias Daniel Niquet por el apaño, una sola línea mejor que dos

Compártelo

Posts Relacionados

Quizas te pueda interesar

9 Responses to “Zebra tables con MooTools”

Comentarios

Una cosa, si los dos tipos de filas comparten el mismo padding, el definirlo dos veces es un poco redundante, ¿no crees?

Yo para las filas alternantes uso las clases “pim” y “pam” :P, se que no es muy “semántico”, pero no se, hace el código más divertido… =)

# nkm -- 14/08/07 - 5:34 pm Responder

Buenas nkm, no lo hace redundante por que estas CSS se aplican una a cada fila, nunca las dos a la vez

Otra solución sería algo asi.


.odd, .even {padding:3px;}
.odd { background:#ccc; }
.even{ background:#eee; }

Saludos

# aNieto2k -- 14/08/07 - 5:36 pm Responder

Está muy buena… sólo le haría un ajuste para ocupar tan sólo una línea, y es que la función “each” de un arreglo de elementos, aparte del parametro “el” que utilizas, puede llevar un segundo opcional que sería el “index”, el cual es un contador del recorrido, permitiendo hacer lo siguiente:

$$(’table.shade-table tr’).each(function(el,count) {el.addClass(count % 2 == 0 ? ‘odd’ : ‘even’);});

# Daniel Niquet -- 14/08/07 - 6:33 pm Responder

Yepa! Daniel Niquet me ha quitado el comentario jejee.

# IceBeat -- 14/08/07 - 8:11 pm Responder

pregunta: Para qué es el signo de $$ (doble pesos) en js ??

# Mario -- 16/08/07 - 12:54 am Responder

Andrés, era count % 2 y no count++ % 2, ya que la función lo incrementa automáticamente….

# Daniel Niquet -- 16/08/07 - 1:04 am Responder

Mario, $$() se usa para obtener uno, o varios elementos sobre una expresión mediante selectores CSS.

Con este ejemplo obtenemos todos los <tr /> de la tabla con clase shade-table.

# aNieto2k -- 16/08/07 - 7:15 am Responder

bien… entendido… gracias

# Mario -- 16/08/07 - 8:57 pm Responder

De hecho en el CSS yo me quedaba con la opción de 3 líneas, si quieres cambiar el padding, es mejor hacerlo en una línea que en dos…

# hector -- 31/08/07 - 4:23 pm Responder

Deja un comentarioTop

Esta web se encuentra sobre la licencia Creative Commons (Reconocimiento - Compartir igual) / Politicas de uso

aNieto2K

Foro / Comenta