Desenhar tabela HTML dinâmico com JavaScript

ou desenhar uma tabela HTML com o JavaScript

Nesta post, mostrarei como criar uma tabela dinâmica ou item <table>

para isso não usaremos nenhuma estrutura. As funções que veremos são:

document.createElement – para criar um item, neste caso, o tr e o td
document.querySelector – Obter referência a Dom elementos

– Anexe um elemento filho a outro

O que vamos desenhar na mesa é um arranjo. Isto é, a partir do arranjo, vamos desenhar uma tabela HTML com JavaScript dinamicamente.

tabela

Nota: Se você não sabe como trabalhar com as tabelas estáticas em HTML Look Neste post.

para desenhar uma tabela HTML com o JavaScript, você tem que definir o cabeçalho da tabela, porque com o JavaScript só vamos cuidar do corpo.

portanto permanece assim:

veja a essência no github.

Temos uma tabela HTML com um cabeçalho, e dentro dela existe o tbody com o id cuerpoTabla.

nesse elemento é onde vamos anexar os itens <tr> que Por sua vez, terá <td>, tudo isso com JavaScript.

Bem como é, a tabela ainda não tem corpo, só tem o cabeçalho:

tabela HTML do corpo

o arranjo

o arranjo que vamos desenhar será um tomado de outro do meu Post Codes. Ras. O mesmo é definido da seguinte forma:

veja a essência no github.

O que vamos fazer é passar pelo arranjo usando forEach e Para cada elemento:

Criar um elemento tr.
para esse elemento tr Vamos anexar 3 itens td, como cada item td corresponde respectivamente ao nome, preço e código do produto.
para definir o texto do td definimos sua propriedade textContent.
que item tr Anexamos ao corpo da tabela

Vamos ver que no código.

desenhe a tabela HTML com JavaScript

Precisamos obter uma referência ao corpo da tabela usando document.querySelector e, uma vez que temos uma referência a ela, criamos a linha da tabela, Adicionamos dados e anexá-lo ao corpo.

O script é o seguinte:

Veja a essência no GitHub.

O código é melhor explicado nos comentários.

A propósito, eu uso o prefixo em minhas variáveis simplesmente para diferenciar entre variáveis e elementos do DOM, no final do nível da linguagem são os mesmos, mas como um programador eu sei que se ele começar com Em seguida, refere-se a um elemento do DOM.

Agora a tabela tem todos os produtos adicionados dinamicamente, e parece ser isto:

desenhar tabela HTML Com o JavaScript - Produtos de tabela dinâmica

Produtos de um acordo Dinamentalmente Desenra com JavaScript em uma tabela

Se você quiser testar o código clique aqui.

Conclusão

neste caso, foi com um arranjo e uma tabela, mas você pode desenhar qualquer coisa com JavaScript, manipulando o sund.

Você só precisa usar

e createElement.

Saiba mais sobre o JavaScript Modern ou HTML E n meu blog.

Eu estou disponível para trabalhar em seu projeto ou executar sua tarefa pendente, não hesite em entrar em contato comigo.
Se o post foi seu gosto Mostra seu suporte compartilhando, inscrevendo-se no blog, seguindo-me ou fazendo uma doação.

sroll

/ / div>

Compartilhar este:

imprimir