« anterior | siguiente »

Home > 2006 > Marzo > Jueves, 30 de Marzo 2006 > Resaltar filas en tablas mediante Javascript
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Jue30Mar2006

Resaltar filas en tablas mediante Javascript

19:05 H (CET)| Temas: How to · Javascript

A la hora de mostrar tablas, un modo de presentación muy recomendable es resaltar las filas alternas como por ejemplo hace la lista de actualizaciones de Bitacoras.com consiguiendo así una mayor facilidad a la hora de leer los datos. Para ello, se suelen usar un estilo para las filas pares.

tr.par {
  background: [color];
}
...
<tr class="par">
  ...
</tr>
...

Si la tabla se genera de forma dinámica, ya sea mediante Javascript o con PHP, JSP, ... esto puede ser una acción bastante sencilla, tan solo tendremos que mirar en el bucle si el contador es par y colocar el class="par". Pero si la tabla es estática, puede suponer un trabajo un poco pesado, ir buscando todos los <tr> y escribir la clase. Siguiendo la Ley del Mínimo Esfuerzo, escribiremos la tabla sin modificar y luego ejecutaremos un script que modifique las filas pares automáticamente.

  function transformar() {
    var tablas = document.getElementsByTagName("TABLE");
    
    for (var i=0; i<tablas.length; i++) {
      for (var j=0; j<tablas[i].rows.length; j++) {
        if (j%2 == 0) {
          tablas[i].rows[j].className = "par";
        }
      }
    }
  }

Ejemplo

Relacionados

Sin comentar » Formulario

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)