Esta postagem de blog demonstrará o processo de criação de uma tabela dinâmica em JavaScript.
Como criar uma tabela dinamicamente em JavaScript?
Vamos ver um exemplo explicando como uma tabela dinâmica será criada em JavaScript.
Exemplo
Para começar, escreva as seguintes linhas em um novo documento HTML para criar um formulário que receba dados e os mostre em uma tabela adicionando-os dinamicamente:
< id div = 'minhaforma' >
< h4 > Preencha o formulário abaixo : h4 >
< etiqueta > Nome : etiqueta >
< tipo de entrada = 'texto' Eu iria = 'nome' >< br >< br >
< etiqueta > Gênero : etiqueta >
< tipo de entrada = 'texto' Eu iria = 'Gênero sexual' >< br >< br >
< etiqueta > Designação : etiqueta >
< tipo de entrada = 'texto' Eu iria = 'designação' >< br >< br >
< etiqueta > Juntando-se Encontro : etiqueta >
< tipo de entrada = 'encontro' Eu iria = 'encontro' >< br >< br >
< ID do botão = 'adicionar' valor = 'Adicionar' > Adicionar dados à tabela botão >
div >
No trecho de código acima:
- Primeiro, crie um título “ Preencha o formulário abaixo: ”.
- Crie campos de entrada para “ Nome ”, “ Gênero ”, “ Designação ', e ' Data de ingresso ” com IDs atribuídos “ nome ”, “ Gênero sexual ”, “ designação ', e ' encontro ” respectivamente, para obter os valores de entrada do usuário.
- Esses IDs são usados para obter a referência dos elementos em JavaScript.
- Em seguida, crie um botão com o “ ao clicar ” propriedade que chamará o “ addTableRow() ” em um arquivo de script, para adicionar e mostrar os dados em uma tabela:
Aqui, no arquivo HTML, escreva estas linhas de código para criar uma estrutura de tabela, onde os dados serão adicionados dinamicamente:
< div >
< h4 > Registro do Empregado b > h4 >
< Centro >
< id da tabela = 'tabelaDados' fronteira = '1' preenchimento de cela = 'dois' >
< tr >
< td >< b > Nome b > td >
< td >< b > Gênero b > td >
< td >< b > Designação b > td >
< td >< b > Data de ingresso b > td >
tr >
tabela >
Centro >
div >
No código acima:
- Crie uma tabela com o id “ tableData ” que será usado no arquivo de script para obter a referência desta tabela e depois adicionar os dados a ela.
- A tabela contém quatro colunas, “ Nome ”, “ Gênero ”, “ Designação ', e ' Data de ingresso ” que armazenará dados de acordo com os nomes das colunas.
A execução do arquivo HTML resultará na seguinte saída do navegador:
Vamos adicionar funcionalidade para criar tabelas dinamicamente usando JavaScript. No arquivo de script ou tag, use o código abaixo que criará uma tabela dinamicamente:
função addTableRow ( ) {foi nome = documento. getElementById ( 'nome' ) ;
foi Gênero sexual = documento. getElementById ( 'Gênero sexual' ) ;
foi designação = documento. getElementById ( 'designação' ) ;
foi encontro = documento. getElementById ( 'encontro' ) ;
foi tabela = documento. getElementById ( 'tabelaDados' ) ;
foi Contagem de linhas = tabela. linhas . comprimento ;
foi fileira = tabela. inserirLinha ( Contagem de linhas ) ;
fileira. inserirCélula ( 0 ) . HTML interno = nome. valor ;
fileira. inserirCélula ( 1 ) . HTML interno = Gênero sexual. valor ;
fileira. inserirCélula ( dois ) . HTML interno = designação. valor ;
fileira. inserirCélula ( 3 ) . HTML interno = encontro. valor ;
}
No trecho acima:
- Primeiro, defina uma função “ addTableRow() ” que acionará o evento click do botão HTML.
- Em seguida, obtenha a referência de todos os campos de entrada, um por um, usando seus respectivos IDs atribuídos usando o “ getelementById() ” e armazene-os em variáveis.
- Essas variáveis serão usadas para obter o valor dos campos de entrada usando o HTML “ valor ” e defina-os nas células individuais da tabela usando o botão “ HTML interno ' propriedade.
- Adicione linhas em uma tabela utilizando o “ tabela.linhas.comprimento ” e, em seguida, armazene valores nela.
Resultado
A saída acima indica que a tabela dinâmica foi criada com sucesso adicionando dados em um formulário usando JavaScript.
Conclusão
A tabela dinâmica é criada usando as diferentes propriedades HTML com métodos predefinidos de JavaScript. Primeiro, crie um formulário em um arquivo HTML e, em seguida, obtenha a referência dos campos usando métodos predefinidos do JavaScript, como o “ getElementById() ” e, em seguida, recupere os valores inseridos usando o método “ valor ' propriedade. Defina esses valores nas respectivas colunas de uma tabela usando o botão “ HTML interno ' propriedade. Esta postagem de blog demonstra o processo de criação de uma tabela dinâmica em JavaScript.