Ako vytvoriť tabuľku z poľa objektov v JavaScripte

Nezarovnané údaje na webovej stránke môžu znížiť čitateľnosť a spôsobiť problémy pre divákov. Na riešenie takýchto situácií môžete použiť tabuľky na lepšie triedenie údajov. Tabuľky poskytujú skvelý formát na zarovnanie údajov a zlepšenie čitateľnosti a viditeľnosti. Ako tabuľky je možné vytvárať pomocou jazyka HyperText Markup Language (HTML), ktorý je možné prepojiť s JavaScriptom.

Tento príspevok vysvetlí postup vytvorenia tabuľky s radom objektov v JavaScripte.

Ako vytvoriť tabuľku z poľa objektov v JavaScripte?

Na vytvorenie tabuľky z poľa objektov použijeme nasledujúce metódy:

Reťazec tabuľky HTML
metóda map().

Poďme preskúmať každú metódu jednu po druhej!

Metóda 1: Vytvorenie tabuľky z poľa objektov pomocou reťazca HTML tabuľky v JavaScripte

V JavaScripte je účelom „ reťazec ” slúži na ukladanie textu, čísel alebo špeciálnych symbolov. Reťazce sú definované uzavretím znaku alebo skupiny znakov do dvojitých alebo jednoduchých úvodzoviek. Konkrétnejšie sa používajú aj na vytváranie tabuliek.

Vezmime si príklad, aby sme získali jasnú predstavu o vytvorení tabuľky z poľa objektov pomocou reťazca Table.

Príklad

V našom príklade použijeme „

'značka s ID' kontajner “ a umiestnite ho do značky nášho súboru HTML:

< div id = 'kontajner' > div >

Vyhlásime „ pole “ a priraďte mu nejaké hodnoty:

bolo pole = [ 'značka' , 'vrabec' , 'ryby' , 'oranžový' ] ;

Inicializujte premennú ' Tabuľka ” na uloženie reťazca tabuľky HTML:

var Table = '' ;

Zadajte dve bunky na riadok nastavením hodnoty „ dva “z “ bunky ” premenná:

každá bunka = dva ;

Ďalej použite „ array.for Each() ” na odovzdanie každého prvku poľa z funkcie. Potom nastavte „ {value} “s identifikátorom” $ ' v rámci '

' ;
} } ) ;
Priraďte uzatváracie značky tabuľky k premennej “ Tabuľka “ pomocou „ += ” operátor. Potom prepojte obsah tabuľky s vytvoreným kontajnerom pomocou jeho kontajnera. Na to použite „ znevažovanie() ” a odovzdajte jej ID a umiestnite vnútorné HTML na nastavenie hodnôt v premennej Table:
Tabuľka += '

” tag. Ďalej deklarujte premennú „ a “ na pridanie na zvýšenie indexu “ i “ a zadajte „ ak ” podmienku tak, že ak sa zvyšok hodnôt buniek a vytvorená premenná rovná nule a hodnota “ a ” nemá rovnakú dĺžku poľa, potom sa rozdeľte na ďalší riadok alebo riadok tabuľky:

pole. pre Každý ( ( hodnota, t.j ) => {
Tabuľka += ` < TD > $ { hodnotu } TD > ` ;
existuje a = i + 1 ;
ak ( a % bunky == 0 && a != pole. dĺžka ) {
Tabuľka += '

' ;

dokument. zľahčovanie ( 'kontajner' ) . vnútorné HTML = Tabuľka ;
V našom súbore CSS , použijeme niektoré vlastnosti na tabuľku a jej dátové bunky. Aby sme tak urobili, nastavíme „ hranica “vlastnosť s hodnotou” 1px pevná látka “ na nastavenie okraja okolo tabuľky a jej buniek a „ vypchávka “vlastnosť s hodnotou” 3px ” na vygenerovanie definovaného priestoru okolo obsahu prvku podľa definovaného okraja:
stôl,TD {

hranica : 1px pevná látka ;

vypchávka : 3px ;

}
Uložte daný kód, otvorte súbor HTML a zobrazte tabuľku objektov poľa:

Preskúmajme ešte jednu metódu na vytvorenie tabuľky z radu objektov v JavaScripte.

Metóda 2: Vytvorenie tabuľky z poľa objektov pomocou metódy map() v JavaScripte

' mapa() ” metóda aplikuje špecifickú funkciu na každý prvok poľa a na oplátku poskytuje nové pole. Táto metóda však nevykonáva žiadne náhrady v pôvodnom poli. Na vytvorenie tabuľky s radom objektov môžete použiť aj metódu map().

Príklad

Vytvorme pole pomocou „ nech kľúčové slovo. Priraďte niektoré hodnoty vlastnostiam alebo kľúčom objektu:
nechať pole = [
{ 'Názov' : 'značka' , 'Vek' : 'Dvadsať (20)' } ,
{ 'Názov' : 'Čo ja' , 'Vek' : 'Tridsať (30)' } ]
Pristupujte k už vytvorenému kontajneru pomocou metódy belittlement() a použite „ insertAdjacentHTML() ” metóda na pridanie značiek tabuľky:
dokument. zľahčovanie ( 'kontajner' ) . insertAdjacentHTML ( 'afterend' ,

` < tabuľky < tr < th >
Použi ' Object.keys() ” na prístup ku kľúčom definovaného objektu a potom použite “ pripojiť sa () “, aby ste ich umiestnili ako nadpisy v rámci “ Značka ”:
$ { Objekt . kľúče ( pole [ 0 ] ) . pripojiť sa ( '' ) }
Po pridaní značky na zatvorenie hlavičky tabuľky a riadku tabuľky a značky na otvorenie údajov použijeme „ mapa() ” spôsob volania “ Object.values() ” pre každú hodnotu kľúčov objektu, potom použite “ pripojiť sa () ” spôsob, ako ich umiestniť do riadku a prejsť na ďalší:
th < tr < TD > $ { pole. mapa ( a => Objekt . hodnoty ( a )

. pripojiť sa ( '' ) ) . pripojiť sa ( '' ) } tabuľky > ` )
Ako vidíte, úspešne sme vytvorili tabuľku z definovaného poľa objektov:

Pokryli sme efektívne spôsoby vytvorenia tabuľky z radu objektov v JavaScripte.

Záver

V JavaScripte sa na vytvorenie tabuľky z poľa objektov používa HTML „ tabuľky “reťazec alebo “ mapa() “ môže byť použitá metóda. Ak to chcete urobiť, zadajte značku div s ID. Potom deklarujte pole objektov v oboch metódach, uložte značky tabuľky do premenných alebo ich priamo vráťte do pripojeného prvku HTML s údajmi. Tento príspevok diskutoval o metóde vytvárania tabuľky z poľa objektov pomocou JavaScriptu.

Ako vytvoriť tabuľku z poľa objektov v JavaScripte