Cómo hacer que las celdas de tabla HTML sean elementos interactivos

Escrito por kevin lee | Traducido por analia moranchel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
 	 Cómo hacer que las celdas de tabla HTML sean elementos interactivos
Los clic permiten que los seres humanos y las computadoras se comuniquen. Haz clic en un botón o un enlace y tu computadora responderá. (Hemera Technologies/AbleStock.com/Getty Images)

Los clic permiten que los seres humanos y las computadoras se comuniquen. Haz clic en un botón o un enlace y tu computadora responderá. Las tablas HTML que aparecen en páginas web a menudo consisten en datos estáticos ante los visitantes del sitio en un formato tabular. Si alguien hace clic en la celda de una tabla, a veces no sucede nada. Al añadir una función corta de JavaScript a tu página, puedes convertir cualquier celda de la tabla en un enlace interactivo que te envíe a otro sitio web o que realice otra acción

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia el editor HTML o el Bloc de notas y abre un documento HTML.

  2. 2

    Pega el código que se muestra a continuación al documento:

    <table class="style2"> <tr>

    <td> Celda normal </td>

    <td> Celda normal </td> </tr>

    <tr> <td> <a href="http://www.whitehouse.gov"> Haz clic aquí para visitar la Casa Blanca </a> </td>

    <td> <a href="#" onclick="javascript: alert('Haz hecho clic en esta celda de tabla')"> Haz clic para ejecutar una función JavaScript </a> </td>

    </tr> </table>

    Este código crea una tabla que contiene dos filas y dos columnas. Las etiquetas "td" definen la celda de la tabla. Cualquier cosa entre esas celdas se convierte en parte de ella. Observa las dos etiquetas de anclaje que aparecen en las dos últimas celdas. Los puntos de atributo "href" del primer anclaje a la página web de la Casa Blanca. La siguiente etiqueta de anclaje añade un evento "onclick" al mismo. Este evento llama función de alerta de JavaScript.

  3. 3

    Guarda el documento HTML y ábrelo en cualquier navegador. Aparecerá la tabla. Mueve el cursor del ratón sobre las celdas de la tabla. El cursor cambia a un puntero cuando lo mueves sobre las últimas dos celdas de la tabla.

  4. 4

    Haz clic en el enlace "Haz clic aquí para visitar la Casa Blanca". El explorador irá al sitio de la Casa Blanca. Haz clic en el enlace "Haz clic para ejecutar una función JavaScript". La función de alerta funciona y muestra un cuadro de mensaje emergente.

Consejos y advertencias

  • Añade una etiqueta de anclaje a cualquier celda de tabla a la que necesitas hacer interactiva. Este ejemplo muestra la función de alerta de JavaScript. Reemplaza esa función con cualquier otra en tu código. Por ejemplo, puedes colocar un enlace dentro de una celda de tabla que llama a una función denominada "Mostrar productos". Esa función podría mostrar una ventana emergente que contiene productos cuando el usuario hace clic en la celda de la tabla.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles