Como carregar dinamicamente uma tabela HTML ao alterar os valores em uma caixa suspensa

Escrito por jim campbell | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

A linguagem JavaScript permite carregar dinamicamente uma tabela HTML baseada no valor escolhido em uma caixa suspensa. Ao conectar a função ao componente, cada vez que o usuário alterar o valor, será exibida dinamicamente uma lista de valores em uma tabela. HTML é uma linguagem estática, mas as tags "script" lhe permitem inserir elementos dinâmicos em uma página.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Clique com o botão direito na página da internet que quiser editar e selecione "Abrir com". Escolha o seu editor HTML preferido na lista de programas.

  2. 2

    Adicione a função JavaScript para criar a tabela e seus valores. Por exemplo, o seguinte código exibirá duas colunas dependendo da seleção feita na caixa suspensa:

    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

    Conecte a função JavaScript à lista suspensa. Copie e cole o seguinte código na tag de definição da caixa suspensa:

    onchange="displayTable(this.selected)"

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível