Cambiar color de celdas de una tabla con javascript

Cambiar color de celdas de una tabla con javascript

Aunque hoy en día podemos utilizar jquery para poder darle un aspecto más agradable a nuestras páginas web, he querido escribir hoy sobre la forma de poner diferentes colores a las filas de una tabla de forma dinámica, es decir,  intercambiar dos colores tan sólo con javascript, html y css.

Comenzamos creando una tabla, sencillita en html:

<table width="400" border="1">
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
      </tr>
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
      </tr>
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
      </tr>
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
      </tr>
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
      </tr>
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
        </tr>
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
       </tr>
      <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
       </tr>
    </table>

 

La tabla se crea como una tabla normal y corriente, pero en la etiqueta <body> tendremos que añadir lo siguiente:

<body onload="celdasColor()">

Con el evento onload de javascript lo que estamos haciendo es ejecutar acciones justo cuando se han terminado de cargar todos los elementos de la página.

Vamos a ir creando a la vez, un archivo css que será el que dará color a nuestras celdas con el siguiente código:

.par {
	background-color:#CCC;
}
.impar {
	background-color:#FFF;
}

Por último nos queda lo más importante, el archivo de javascript, en este caso, un archivo que debe tener la extensión .js:


function celdasColor (){
var celdas = document.getElementsByTagName(“tr”);
for (var i=0; iEl operador del porcentaje (%) al que llamamos “módulo” lo utilizamos para quedarnos con los múltiplos de “2” o celdas pares. No debemos confundirlo con el cálculo del porcentaje, es el resto de una división.

Y nuestra tabla quedaría así:

Entradas Relacionadas

No hay comentarios

You can post first response comment.

Deja un comentario

Por favor introduzca su nombre Por favor introduzca una dirección e-mail válido Por favor deje un mensaje.

¿Qué es Togirl.net?

Togirl.net es un blog que intenta acercarte entre otras cosas al mundo tecnológico de una forma divertida y atractiva.

LBM Diseño Web

LBM Diseña tu web

Frikicamiseta.es

Los mejores diseños para tus camisetas

Pin It on Pinterest