Cum se creează un tabel dintr-o matrice de obiecte în JavaScript

Pe o pagină web, datele nealiniate pot scădea lizibilitatea și pot crea probleme pentru spectatori. Pentru a aborda astfel de situații, puteți utiliza tabelele pentru a sorta datele într-un mod mai bun. Tabelele oferă un format excelent pentru a alinia datele și pentru a îmbunătăți lizibilitatea și vizibilitatea. Deoarece tabelele pot fi create folosind limbajul HyperText Markup (HTML), care poate fi legat cu JavaScript.

Acest post va explica procedura de formare a unui tabel cu o serie de obiecte în JavaScript.

Cum se creează un tabel dintr-o matrice de obiecte în JavaScript?

Pentru a crea un tabel dintr-o matrice de obiecte, vom folosi următoarele metode:

Șir de tabel HTML
metoda map().

Să explorăm fiecare metodă una câte una!

Metoda 1: Creați un tabel dintr-o matrice de obiecte folosind șirul de tabel HTML în JavaScript

În JavaScript, scopul unui „ şir ” este pentru a stoca text, numere sau simboluri speciale. Șirurile sunt definite prin închiderea unui caracter sau a unui grup de caractere între ghilimele duble sau simple. Mai precis, ele sunt utilizate și pentru crearea de tabele.

Să luăm un exemplu pentru a obține un concept clar despre crearea unui tabel dintr-o serie de obiecte folosind șirul Table.

Exemplu

În exemplul nostru, vom folosi un „

„etichetă cu un id” recipient ” și plasați-l în eticheta a fișierului nostru HTML:

< div id = 'container' > div >

Să declarăm un „ matrice ” și atribuiți-i niște valori:

a fost matrice = [ 'Marcă' , 'Vrabie' , 'Peşte' , 'Portocale' ] ;

Inițializați o variabilă „ Masa ” pentru a stoca șirul tabelului HTML:

var Tabel = „” ;

Specificați cele două celule pe rând setând valoarea „ Două ” din ” celule ' variabil:

fiecare celulă = Două ;

Apoi, utilizați „ array.for Each() ” pentru a trece fiecare element de matrice din funcție. Apoi, setați „ {valoare} „cu un identificator” $ ' în cadrul ' ' etichetă. Apoi, declarați o variabilă „ A ” pentru a adăuga pentru a crește indexul ” i ”, și specificați un „ dacă „condiție în așa fel încât dacă restul de valori ale celulelor și variabila creată este egală cu zero și valoarea „ A ” nu este egală cu lungimea matricei, apoi spargeți în următoarea linie sau rând a tabelului:

matrice. pentru Fiecare ( ( valoare, i ) => {
Masa += ` < TD > $ { valoare } TD > ` ;
este un = i + 1 ;
dacă ( A % celule == 0 && A != matrice. lungime ) {
Masa += „” ;
} } ) ;

Atribuiți etichetele de închidere a tabelului variabilei „ Masa ' folosind ' += ” operator. Apoi, legați conținutul tabelului la containerul creat folosind containerul acestuia. Pentru aceasta, utilizați „ slăbire () ” și transmiteți-i id-ul și plasați HTML-ul interior pentru a seta valorile în variabila Tabel:

Masa += „” ;

document. slăbit ( 'container' ) . interior HTML = Masa ;

În fișierul nostru CSS , vom aplica unele proprietăți tabelului și celulelor sale de date. Pentru a face acest lucru, vom seta „ frontieră „proprietate cu valoarea „ 1px solid ” pentru a seta chenarul în jurul tabelului și al celulelor acestuia și „ căptușeală „proprietate cu valoarea „ 3px ” pentru a genera spațiul definit în jurul conținutului elementului, în funcție de chenarul definit:

masă, TD {

frontieră : 1px solid ;

căptușeală : 3px ;

}

Salvați codul dat, deschideți fișierul HTML și vizualizați tabelul cu obiectele unei matrice:

Să explorăm încă o metodă de a crea un tabel dintr-o serie de obiecte în JavaScript.

Metoda 2: Creați un tabel dintr-o matrice de obiecte folosind metoda map() în JavaScript

„ Hartă() ” Metoda aplică o funcție specifică fiecărui element al matricei și, în schimb, oferă o nouă matrice. Cu toate acestea, această metodă nu face nicio înlocuire în matricea originală. De asemenea, puteți utiliza metoda map() pentru a forma un tabel cu o serie de obiecte.

Exemplu

Să creăm o matrice folosind „ lăsa ” cuvânt cheie. Atribuiți câteva valori proprietăților sau cheilor obiectului:

lasă matrice = [
{ 'Nume' : 'Marcă' , 'Vârstă' : „Douăzeci (20)” } ,
{ 'Nume' : 'Ce eu' , 'Vârstă' : „Treizeci (30)” } ]

Accesați containerul deja creat folosind metoda belitlement() și utilizați „ insertAdjacentHTML() ” metoda de a adăuga etichetele de tabel:

document. slăbit ( 'container' ) . insertAdjacentHTML ( „după sfârşit” ,

` < masa >< tr >< th >

Folosește ' Object.keys() ” pentru a accesa cheile obiectului definit și apoi utilizați „ a te alatura() ” pentru a le plasa ca titluri în cadrul „ ' etichetă:

$ { Obiect . chei ( matrice [ 0 ] ) . a te alatura ( „” ) }

După adăugarea etichetei de închidere a capului tabelului și a rândului tabelului și a etichetei de deschidere a datelor, vom folosi „ Hartă() ” pentru a apela “ Object.values() ” pentru fiecare valoare a tastelor obiect, apoi utilizați „ a te alatura() ” pentru a le plasa într-un rând și pentru a trece la următorul:

th >< tr >< TD > $ { matrice. Hartă ( și => Obiect . valorile ( și )

. a te alatura ( „” ) ) . a te alatura ( „” ) } masa > ` )

După cum puteți vedea, am creat cu succes tabelul din matricea definită de obiecte:

Am acoperit modalitățile eficiente de a crea un tabel dintr-o serie de obiecte în JavaScript.

Concluzie

În JavaScript, pentru formarea unui tabel dintr-o matrice de obiecte, HTML „ masa „ șir sau „ Hartă() ” poate fi utilizată. Pentru a face acest lucru, specificați o etichetă div cu un id. Apoi, declarați matricea de obiecte în ambele metode, stocați etichete de tabel în variabile sau returnați-le direct la un element HTML conectat cu date. Această postare a discutat despre metoda de creare a unui tabel dintr-o matrice de obiecte folosind JavaScript.

Cum se creează un tabel dintr-o matrice de obiecte în JavaScript