Disegna tavolo HTML dinamico con JavaScript

Rendering o disegna una tabella HTML con JavaScript

In questo post ti mostrerò come creare una tabella dinamica o un elemento <table>

Per questo non useremo alcun quadro. Le funzioni che vedremo sono:

• document.createElement – per creare un elemento, in questo caso il tr e il td
• document.querySelector – ottenere riferimento a dom elements
• elemento.appendChild – Allega un elemento figlio a un altro

Ciò che stiamo per disegnare sul tavolo è un accordo. Cioè, dal disposizione, disegneremo una tabella HTML con JavaScript dinamicamente.

Tabella

Nota: se non sai come lavorare con le tabelle statiche nell’aspetto HTML A questo post.

Per disegnare una tabella HTML con JavaScript devi definire l’intestazione del tavolo, perché con JavaScript ci prenderà cura del corpo.

Pertanto , rimane come questo:

Vedi l’asselimento su github.

Abbiamo una tabella HTML con un’intestazione, e al suo interno c’è il tbody con l’ID cuerpoTabla.

In quell’elemento è dove fissando gli elementi <tr> che a turno avrà <td>, tutto questo con JavaScript.

Oltre a è, la tabella non ha ancora un corpo, ha solo l’intestazione:

La disposizione

La disposizione che disegneremo sarà una presa da un altro dei miei Codici postali Ras. Lo stesso è definito come segue:

Vedi l’asselimento su github.

Cosa faremo è passare attraverso la disposizione usando forEach e Per ogni elemento:

1. Crea un elemento tr.
2. a quell’elemento tr Allegheremo 3 elementi td, come ogni elemento td corrisponde rispettivamente al nome, al prezzo e al codice del prodotto.
3. per impostare il testo del td Impostiamo la tua proprietà textContent.
4. Articolo tr Attacciamolo al corpo della tabella

Vediamo che nel codice.

Disegna tavolo HTML con JavaScript

Dobbiamo ottenere un riferimento al corpo della tabella usando document.querySelector, e una volta che abbiamo un riferimento ad esso, creiamo la fila del tavolo, Aggiungiamo dati e collegiamolo al corpo.

Lo script è il seguente:

Vedi il GIST su GitHub.

Il codice è meglio spiegato nei commenti.

A proposito, uso il prefisso $ nelle mie variabili semplicemente per differenziare le variabili ed elementi del DOM, alla fine a livello della lingua sono gli stessi, ma come programmatore so che se inizia con $ Si riferisce quindi a un elemento del DOM.

Ora la tabella ha tutti i prodotti aggiunti dinamicamente, e sembra questo:

Se si desidera testare il codice clicca qui.

CONCLUSIONE

In questo caso era con un accordo e una tabella, ma è possibile disegnare qualsiasi cosa con JavaScript, manipolando il Dund.

Devi solo usare appendChild e createElement.

Ulteriori informazioni su JavaScript moderno o HTML E n il mio blog.