Como criar a tabela dinamicamente em JavaScript

Uma tabela dinâmica é uma tabela que altera seu número de linhas, dependendo da entrada recebida no tempo de execução. Alguns sites ou aplicativos on -line, como sites de negócios, precisam criar uma tabela dinamicamente enquanto adiciona alguns dados ou informações. Isso pode ser feito usando JavaScript, pois o JavaScript é uma linguagem de script que usa a digitação dinâmica.

Esta postagem do blog demonstrará o processo para criar 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 pega dados e depois o mostre em uma tabela, adicionando -o dinamicamente:

Preencha o formulário abaixo:

Nome:



Gênero:



Designação:



Data de ingresso:



Adicionar dados à tabela

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 o ID atribuído“nome","gênero","designação", e "data”Respectivamente, para receber 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 “ONCLICK”Propriedade que chamará o“addTableRow ()”Função em um arquivo de script, para adicionar e mostrar os dados em uma tabela:

Aqui, no arquivo html, escreva essas linhas de código para criar uma estrutura de tabela, onde os dados serão adicionados dinamicamente:

Registro de funcionários

Nome

Gênero

Designação

Data de ingresso

No código acima:

• Crie uma tabela com o ID “Tabledata”Isso será usado no arquivo de script para obter a referência desta tabela e adicione os dados a ela.
• A tabela contém quatro colunas, “Nome","Gênero","Designação", e "Data de ingresso”Isso 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 na tag, use o código abaixo que criará uma tabela dinamicamente:

função addtableRow ()
Var Nome = Documento.getElementById ("nome");
var gênero = documento.getElementById ("gênero");
VAR Designação = documento.getElementById ("designação");
var data = documento.getElementById ("data");
tabela var = documento.getElementById ("Tabledata");
var rowCount = tabela.linhas.comprimento;
Var Row = tabela.insertrow (rowcount);
linha.InsertCell (0).inerhtml = nome.valor;
linha.InsertCell (1).INNERHTML = Gênero.valor;
linha.InsertCell (2).inerhtml = designação.valor;
linha.InsertCell (3).INNERHTML = Data.valor;

No trecho acima:

• Primeiro, defina uma função “addTableRow ()”Isso acionará o evento de cliques 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 ()”Método e armazene -os em variáveis.
• Essas variáveis ​​serão usadas para obter o valor dos campos de entrada usando o HTML “valor”Propriedade e coloque -os nas células individuais da tabela usando o“Innerhtml" propriedade.
• Adicione linhas em uma tabela utilizando o “mesa.linhas.comprimento”Propriedade e depois armazenar valores nela.

Saída

A saída acima indica que a tabela dinâmica é 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 JavaScript. Primeiro, crie um formulário em um arquivo html e depois obtenha a referência dos campos usando métodos predefinidos de JavaScript, como o “getElementById ()”Método e depois recuperar seus valores inseridos usando o“valor" propriedade. Defina esses valores nas respectivas colunas de uma tabela usando o “Innerhtml" propriedade. Esta postagem do blog demonstra o processo para criar uma tabela dinâmica em JavaScript.