Veremos en este artículo un par de soluciones a una pregunta típica de trabajo con Javascript: cambiar el color a la celda de una tabla dinámicamente y como respuesta a acciones del usuario. Este ejemplo se puede realizar muy fácilmente y ofreceremos un par de soluciones, que podemos aplicar dependiendo del caso concreto en que nos encontremos.

La primera solución que vamos a ver es cómo cambiar el color de una celda al pasar el ratón por encima. Cuando entremos con el ratón en la celda debe cambiarse por un color y cuando se salga lo cambiaremos por otro.

El segundo caso que vamos a realizar es cambiar el color de la celda como respuesta a eventos de elementos que están fuera de la propia celda. En concreto, cambiaremos el color de una celda cuando se accione un formulario que está fuera de las celdas a cambiar.

Cambiar el color de una celda al pasar el ratón por encima

Es un caso muy típico que se puede ver en muchas webs. Este ejemplo resulta bastante sencillo de hacer con CSS, sin necesidad de escribir ni una línea de código Javascript, pero a pesar de ello lo mostraremos aquí. No obstante, podemos consultar la FAQ ¿Cómo puedo cambiar el color de las celdas cuando paso el puntero por encima de ellas? para obtener más información sobre CSS para hacer este efecto.

En el ejemplo tendremos una tabla con varias celdas y para cada una tendremos definido el evento onmouseover y onmouseout, para llamar a una función que se encargue de cambiar el color cuando se entre en la celda y cuando se salga, respectivamente.

La tabla tendrá esta forma:

<table width=100>
<tr>
   <td bgcolor="#dddddd" id="celda1" onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">Casilla numero 1</td>
</tr>
<tr>
   <td bgcolor="#dddddd" id="celda2" onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">Casilla numero 2</td>
</tr>
…
<tr>
   <td bgcolor="#dddddd" id="celda10" onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">Casilla numero 10</td>
</tr>
</table>

Las funciones que se encargan de alterar el color reciben por parámetro la palabra this, que es una referencia a la celda donde está el evento. Si estamos en el evento de la celda 1, this hace referencia a esa misma celda 1. Las funciones son las siguientes:

function cambiar_color_over(celda){
   celda.style.backgroundColor="#66ff33"
}
function cambiar_color_out(celda){
   celda.style.backgroundColor="#dddddd"
}

Como se puede ver, reciben la celda cuyo color se desea cambiar (que se envió con la palabra this en el manejador del evento). Luego ejecutan la sentencia necesaria para cambiar el color.

Cambiar el color a una celda sin pasar la referencia this

El segundo caso que habíamos adelantado que íbamos a hacer, era cambiar el color a una celda desde otra parte de la página. Hemos visto que, si estamos en la propia celda, podemos enviar una referencia de la propia casilla con la palabra this, pero si no estamos codificando un evento de la celda, sino que estamos en otro lugar del código de la página, no tendremos posibilidad de enviar esa sencilla referencia.

Entonces se nos hace necesario obtener la referencia de la celda por otro mecanismo. Entra en juego la función de Javascript (que en realidad es un método del objeto document) llamada getElementById(). Esta función recibe el nombre de un identificador y devuelve una referencia al elemento que tiene ese identificador.

Se asignan identificadores a los elementos de HTML con el atributo id. De esta manera:

<td id="celda1">

Pudimos ver en el código de la tabla, escrito líneas arriba, que cada celda tenía un identificador definido. Utilizaremos ese identificador para obtener la referencia a la celda que deseamos alterar su color.

Por ejemplo, si queremos obtener una referencia a la celda con identificador "celda1", utilizaríamos la llamada a esa función así:

celda = document.getElementById("celda1")

Luego, con la referencia de la celda, podemos cambiar el color como vimos antes:

celda.style.backgroundColor="#dddddd"

En nuestro ejemplo para ilustrar este método hemos creado un formulario con dos campos de texto y un botón. En el primer campo de texto escribiremos el número de la celda cuyo color queremos cambiar. En el segundo, escribiremos el nombre del color que queremos poner a la casilla, o su código RGB. Cuando apretemos al botón llamaremos a una función que se encargará de cambiar el color de la celda.

El formulario tendrá un código como este:

<form name=fcolor>
Numero de celda: <input type=text name=celda size=3>
<br>
Color: <input type=text name=micolor size=8>
<br>
<input type=button value="Cambiar color" onclick="cambia_color()">
</form>

Y la función javascript que se encargará de cambiar el color tendrá este código:

function cambia_color(){
   celda = document.getElementById("celda" + document.fcolor.celda.value)
   celda.style.backgroundColor=document.fcolor.micolor.value
}

Como se puede ver, para obtener la referencia utilizamos la función document.getElementById() y le pasamos el id de la celda que queremos cambiar su color. El identificador de la celda se compone por la palabra "celda" y el número de la celda, que sacamos del formulario.

Luego se pone en la celda el color que se saca del otro campo del formulario.

Cambio de color en marcha

Hemos realizado una página con todo el código Javascript comentado en este ejercicio para ilustrar el modo de cambiar el color a las celdas de una tabla. Se puede ver en http://www.desarrolloweb.com/articulos/ejemplos/tallerjs/cambiar_color_celda.html