Cómo cargar dinámicamente una tabla HTML al cambiar dinámicamente los valores desplegables

Escrito por jim campbell | Traducido por walter f. stocco
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cargar dinámicamente una tabla HTML al cambiar dinámicamente los valores desplegables
Vincula la función JavaScript al cuadro desplegable. (George Doyle/Stockbyte/Getty Images)

Javascript carga dinámicamente una tabla HTML con base en la retroalimentación de un valor desplegable. Vinculas la función a tu casilla desplegable HTML, por lo que cada vez que el usuario cambia el valor, una lista de los valores de la tabla se muestra dinámicamente. HTML es un lenguaje estático, pero las etiquetas "comando" de JavaScript permiten insertar elementos dinámicos de la página HTML estática.

Nivel de dificultad:
Moderado

Instrucciones

  1. 1

    Haz clic en la página Web que desees editar y selecciona "Abrir con". Elige tu editor de HTML preferido de la lista de programas.

  2. 2

    Agrega la función JavaScript para crear la tabla y sus valores. Por ejemplo, el código siguiente muestra dos columnas en función de una selección realizada en el menú desplegable:

    function displayTable(selection) { if (selection == 1) { document.write("<table><tr><td>First Selection</td></tr></table>"); } else { document.write("<table><tr><td>Second Selection</td></tr></table>"); } }

  3. 3

    Vincula la función JavaScript al cuadro desplegable. Copia y pega el siguiente código a la definición de la etiqueta del cuadro desplegable:

    onchange="displayTable(this.selected)"

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