> Manuales > Taller de Javascript

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.

Cambiar el color a las celdas de una tabla con Javascript

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:

<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:

<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:

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual