Alternar colores en las filas de una tabla con jQuery
Escrito por Martín Iglesias y leído 1,409 veces. Ver comentarios
18ABRIL/2012
- Categorías:
- Javascript
- Tablas
- Framework
- Jquery
Este pequeñísimo código hará que todas las filas de una tabla alternen su color de fondo automáticamente utilizando la librería jQuery, sin declarar clases ni ningún código en especial.
Hay muchísimas formas de hacer ésto, una es con PHP como nos enseña Webintenta, pero creo que, hoy día, el 99% de los desarrolladores web están utilizando jQuery, Mootools o cualquier otro framework en javascript para sus proyectos. Por esta razón, veo más que útil aplicar una nueva opción visual a tus trabajos con 1 línea de código.
Básicamente, tenemos 2 formas de alternar el color de fondo de nuestras filas con jQuery (seguramente existan más formas), pero me voy a parar en estas 2. La primera, es aplicando una clase a las filas pares o impares y la segunda, es aplicando directamente el color de fondo.
Dicho ésto, debemos recordar que aplicar el CSS directamente, hará que por cada cambio que nos interese hacer, tendremos que escribirlo en una nueva línea, mientras que aplicando clases, podemos definir muchos efectos visuales a la vez (fondos, negritas, etc...)
Ya hablaste demasiado... dame el código.
Es verdad, para poner 2 líneas de código me pasé hablando... pues vamos a ello.
El código 1, te muestra como alternar los colores de fondo de nuestras filas pares o impares aplicando directamente el color de fondo por CSS.
El código 2, declara las clases a utilizar en nuestra hoja CSS para utilizar el método 2, y el código 3, aplica esas clases a nuestras tablas.
$(function() {
$("tr:even").css("background-color", "#f5f5f5"); // aplica color gris suave a las filas pares. Deberemos cambiar even por odd para las impares.
});.fila1{background:#f5f5f5;font-weight:bold;}
.fila2{background:#666;font-weight:normal;}$(function() {
$("tr:even").addClass("fila1");
$("tr:odd").addClass("fila2");
});Acerca del Autor:
Diseñador web freelance en Coruña Galicia | Martin Iglesias
Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.
Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!
Artículos relacionados:
- 20 plugins para jQuery que no pueden faltar en tus webs
- Excelente listado de 240 plugins para jquery
- Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
- jQuery Validate: la rápida validación de formularios.
- Calendario en PHP con eventos, jQuery y vTip
- Formularios web con jQuery Validate y envío por phpmailer y gmail
- 18 plugins jquery que no pueden faltar en tu web parte 2
Este artículo ha salido en un total de 70 búsquedas desde Google en sus 400 días de vida y ha sido visto 1,409 veces.
