Cómo cambiar el color de una celda de una tabla con javascript como respuesta a las acciones del usuario en los elementos de la página.
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 con CSS pero podría haber casos en los que necesitemos Javascript. Lo vamos a explicar todo y ofreceremos un par de soluciones, que podemos aplicar dependiendo del caso concreto en que nos encontremos.
Cambiar el color de una celda al pasar el ratón por encima
Para esto no necesitas Javascript!! ya que CSS con la pseudoclase :hover de CSS se puede hacer perfectamente.
Tenemos un artículo que explica cómo se usa hover en CSS y que resuelve cualquier duda que se pueda tener.
También 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.
Este sería el caso más sencillo. Es verdad que lo podrías hacer con Javascript también con un código como este:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla Interactiva</title>
<style>
/* Estilo base para las celdas */
td {
background-color: #dddddd; /* Color de fondo */
width: 100px; /* Ancho fijo para todas las celdas */
}
</style>
<script>
// Funciones para cambiar el color de fondo de las celdas
function cambiar_color_over(elemento) {
elemento.style.backgroundColor = '#ffcccc'; // Color cuando el mouse está sobre la celda
}
function cambiar_color_out(elemento) {
elemento.style.backgroundColor = '#dddddd'; // Color original de la celda
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">Casilla numero 1</td>
</tr>
<tr>
<td onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">Casilla numero 2</td>
</tr>
<!-- Repetir según sea necesario -->
<tr>
<td onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">Casilla numero 10</td>
</tr>
</table>
</body>
</html>
Pero como decimos, no es un buen ejemplo porque en este caso usar Javascript sería totalmente innecesario. No obstante dejo algunas explicaciones sobre cómo funciona este código.
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:
// Funciones para cambiar el color de fondo de las celdas
function cambiar_color_over(elemento) {
elemento.style.backgroundColor = '#ffcccc'; // Color cuando el mouse está sobre la celda
}
function cambiar_color_out(elemento) {
elemento.style.backgroundColor = '#dddddd'; // Color original de la celda
}
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 de una celda al interaccionar con otros elemntos de la página
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 estos casos sí es muy probable que necesitemos Javascript, aunque podría depender de la estructura de etiquetas de la página que pudieramos conseguir efectos simplemente usando CSS.
En nuestro caso concreto cambiaremos el color de una celda cuando se accione un formulario que está fuera de las celdas a cambiar. Así está claro que requeriremos Javascript, pues son interacciones que van más allá de las posibilidades de control del CSS.
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í:
var 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 el método 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.
Ejemplo de cambio de color de celdas más elaborado
Ahora vamos a ver un ejemplo con HTML, CSS y Javascript de una página donde hay campo select de formulario que tiene una lista de colores. Además hay otro select que tiene una lista de números del 1 al 10. Adicionalmente tendremos una tabla con celdas numeradas del 1 al 10.
Al cambiar los valores de cualquiera de los dos select se obtendrán datos para hacer un cambio de color en la celda y color adecuados:
- Por un lado obtenemos el color en el primer select
- Por orto lado el índice de la celda que se quiere cambiar, en el otro select.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cambio de Color en Tabla</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td {
height: 50px; /* Altura de las celdas */
width: 50px; /* Ancho de las celdas */
text-align: center; /* Alineación del texto en las celdas */
}
</style>
</head>
<body>
<form>
<label for="colorPicker">Elige un color:</label>
<select id="colorPicker">
<option value="red">Rojo</option>
<option value="blue">Azul</option>
<option value="green">Verde</option>
<option value="yellow">Amarillo</option>
<option value="purple">Morado</option>
</select>
<label for="cellPicker">Número de celda (1-10):</label>
<select id="cellPicker">
<!-- Usamos un bucle para generar las opciones -->
<script>
for (let i = 1; i <= 10; i++) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
</form>
<table>
<tr>
<!-- Generamos las celdas numeradas del 1 al 10 con JavaScript -->
<script>
for (let i = 1; i <= 10; i++) {
document.write('<td id="cell' + i + '">' + i + '</td>');
}
</script>
</tr>
</table>
<script>
// Obtenemos los elementos del formulario y la tabla
const colorPicker = document.getElementById('colorPicker');
const cellPicker = document.getElementById('cellPicker');
// Función para cambiar el color de la celda seleccionada
function changeCellColor() {
const selectedColor = colorPicker.value; // Color seleccionado
const selectedCellNumber = cellPicker.value; // Número de celda seleccionado
const selectedCell = document.getElementById('cell' + selectedCellNumber); // Celda a cambiar
selectedCell.style.backgroundColor = selectedColor; // Cambiamos el color de fondo de la celda
}
// Eventos para manejar los cambios en los selects
colorPicker.addEventListener('change', changeCellColor);
cellPicker.addEventListener('change', changeCellColor);
</script>
</body>
</html>
Algunos detalles a considerar sobre el código Javascript anterior:
- Tenemos un bucle para generar automáticamente las opciones de números del 1 al 10 para el segundo select.
- Otro bucle para generar las celdas numeradas en la tabla.
- Una función
changeCellColor()que cambia el color de fondo de la celda seleccionada basándose en el color y número seleccionados. - Dos eventos change que llaman a
changeCellColor()cuando hay cambios en alguno de los select, asegurando que el color de la celda cambie inmediatamente después de que los valores de los selects cambien.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...