Desenați tabelul HTML dinamic cu JavaScript

Render sau trageți o masă HTML cu JavaScript

în acest post Vă voi arăta cum să creați o masă dinamică sau un element <table>

Pentru aceasta nu vom folosi niciun cadru. Funcțiile pe care le vom vedea sunt:

document.createElement – Pentru a crea un element, în acest caz tr

– obțineți referința la elementele DOM

elemento.appendChild – Atașați un element copil în alta

Ce vom detașa pe masă este un aranjament. Adică din aranjament, vom desena o masă HTML cu JavaScript dinamic.

tabel

Notă: Dacă nu știți cum să lucrați cu mesele statice în aspectul HTML La acest post.

Pentru a desena o masă HTML cu JavaScript, trebuie să definiți antetul mesei, deoarece cu JavaScript vom avea grijă de corp.

Prin urmare, prin urmare Rămâne ca acesta:

Vedeți gistul de pe Github.

Avem o masă HTML cu un antet, iar în interiorul acesteia există tbody cu ID cuerpoTabla.

în acel element este locul în care vom atașa elementele <tr> Care La rândul său, va avea iv id = „20773C48D6”

, toate acestea cu JavaScript.

Pe lângă ea este, tabelul încă nu are corp, are doar antetul:

Tabelul HTML al corpului

Aranjamentul

Aranjamentul pe care îl vom desena va fi unul luat de la altul coduri poștale Ras. Același lucru este definit după cum urmează:

Vedeți gistul de pe GitHub.

Ce vom face este să trecem prin aranjament folosind forEach și Pentru fiecare element:

Creați un element tr.
la acel element tr Vom atașa 3 articole td, ca fiecare element td corespunde, respectiv, la numele, prețul și codul produsului.
pentru a seta textul td Am setat proprietatea textContent.
Postul tr Îl atașăm la corpul tabelului

hai să vedem că în cod.

Desenați tabelul HTML cu Javascript

Trebuie să obținem o referință la corpul tabelului folosind document.querySelector, și odată ce avem o referință la ea, creăm rândul mesei, adăugăm date și atașați-l corpului.

Scriptul este după cum urmează:

Vedeți gistul de pe Github.

Codul este cel mai bine explicat în comentarii.

Apropiere, folosesc prefixul $ în variabilele mele pur și simplu pentru a face diferența între variabilele și elementele DOM, la sfârșitul limbilorului la nivelul limbilor sunt aceleași, dar ca un programator știu că dacă începe cu Apoi se referă la un element al DOM.

Acum, tabelul are toate produsele adăugate dinamic și se pare că acest lucru:

Desenați tabelul HTML Cu JavaScript - produse dinamice de masă

Produsele unui aranjament remiză dinamic cu JavaScript pe o masă

dacă doriți să testați codul, faceți clic aici.

Concluzie

În acest caz a fost cu un aranjament și o masă, dar puteți desena ceva cu JavaScript, manipulând sund.

Trebuie doar să utilizați appendChild și createElement.

Aflați mai multe despre JavaScript modern sau HTML E n blog-ul meu.

Sunt disponibil pentru a lucra la proiectul dvs. sau pentru a efectua sarcina dvs. în așteptare, nu ezitați să mă contactați. În cazul în care postul a fost vă place Afișează suportul dvs. împărtășind acest lucru, subscris la blog, urmărindu-mă sau face o donație.

/ / Div>

Împărtășește acest lucru:

imprimare