Resaltar filas en tablas HTML con un clic

Cuando crea páginas web en HTML, puede usar las funciones de JavaScript para alterar la apariencia de los elementos de la página en la interacción del usuario. Para resaltar ciertas filas en una tabla, puede establecer declaraciones de hojas de estilo en cascada para estas filas en su estado normal y en su estado resaltado. Al agregar un atributo de escucha de eventos a los elementos de la fila, su página puede llamar a una función de JavaScript para ejecutar onclicks, alterando dinámicamente los atributos del nombre de clase del elemento y, posteriormente, alterando su apariencia.

1.

Crea tu tabla HTML. Agregue el siguiente código de marca de muestra a su archivo de página web:

Esta tabla contiene dos filas cada una con tres columnas. Cada una de las celdas tiene un número para su demostración, pero puede incluir cualquier contenido que desee en su propia página.

2.

Agregue una sección para CSS en la sección principal de su página. Entre las etiquetas de encabezado de apertura y de cierre de su archivo, agregue el siguiente esquema de código CSS:

Este código establece que las filas de la tabla tengan un fondo blanco de forma predeterminada, con un fondo rojo cuando el usuario hace clic en ellas. Puede modificar estas configuraciones para reflejar el estilo de su propia página. Cuando el usuario ve la página por primera vez, se aplicará la configuración de CSS normal, según lo indicado por los atributos de clase de fila de la tabla dentro del código HTML original.

3.

Agregue una sección para JavaScript en la sección de encabezado de su página. Entre las etiquetas de apertura y cierre en su archivo, agregue el siguiente código:

Esto crea una sección de script y un esquema de función. El navegador llamará a esta función cuando el usuario haga clic en cualquiera de las filas de su tabla, pasando el valor del atributo ID de la fila en la que se hizo clic para que la secuencia de comandos pueda identificarla.

4.

Modifique el nombre de clase de los elementos de la fila de su tabla. Cuando la función se ejecuta, esto significa que el usuario ha hecho clic en un elemento de fila. Agregue el siguiente código dentro de su función de JavaScript, adquiriendo una referencia al elemento de fila de la tabla dentro de la página: var row = document.getElementById (rowID);

Agregue la siguiente línea para obtener una copia de cadena del nombre de clase actual de su elemento de fila de tabla: var curr = row.className;

Agregue una declaración condicional que adapte el aspecto de la fila de la tabla: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; else row.className = "normal";

Si la fila de su tabla está configurada actualmente como normal, la función la cambiará para tener un estado de resaltado. Si está resaltado actualmente, la función volverá a cambiar a normal. Esto creará un efecto de alternancia, con el estado de resaltado alternando cada vez que el usuario haga clic en la fila.

5.

Guarde su archivo y abra la página en un programa de navegador web. Prueba la página haciendo clic repetidamente en las filas. Debería ver cambiar el color de fondo cada vez que haga clic en una fila. Si la página no resalta las filas al hacer clic, verifique su código y ábralo nuevamente. Mejore el código para proporcionar el nivel de resaltado y presentación que desea que tenga su sitio.

Propina

• Al agregar a su código CSS, puede dictar el color del texto y otras propiedades de las filas de su tabla en cada estado.

Advertencia

• JavaScript y CSS tienen diferentes resultados en todos los navegadores, por lo que las pruebas son esenciales.