Ez a bejegyzés elmagyarázza a JavaScript objektumok tömbjének táblázat létrehozásának eljárását.
Hogyan készítsünk táblázatot objektumok tömbjéből JavaScriptben?
Táblázat létrehozásához objektumok tömbjéből a következő módszereket fogjuk használni:
Vizsgáljuk meg az egyes módszereket egyenként!
1. módszer: Hozzon létre táblázatot objektumok tömbjéből a JavaScript HTML táblázatkarakterláncával
A JavaScriptben egy „ húr ” szöveg, számok vagy speciális szimbólumok tárolására szolgál. A karakterláncok meghatározása egy karakter vagy karaktercsoport dupla vagy szimpla idézőjelbe zárásával történik. Pontosabban, táblázatok létrehozására is használják őket.
Vegyünk egy példát, hogy világos koncepciót kapjunk a táblázat létrehozásáról objektumok tömbjéből a Table karakterlánc használatával.
Példa
Példánkban egy „ deklaráljunk egy „ sor ” és rendeljen hozzá néhány értéket: Változó inicializálása ' asztal ” a HTML-tábla karakterláncának tárolásához: Adja meg a két cellát soronként a ' két ' a ' sejteket ” változó: Ezután használja a „ array.for Each() ” metódussal átadja az egyes tömbelemeket a függvényből. Ezután állítsa be a „ {érték} 'azonosítóval' $ ' belül ' Rendelje hozzá a táblázatzáró címkéket a ' változóhoz asztal ' használni a ' += ' operátor. Ezután kapcsolja össze a táblázat tartalmát a létrehozott tárolóval annak tárolójával. Ehhez használja a „ lekicsinylés () ” metódust, és adja át neki az azonosítót, és helyezze el a belső HTML-t az értékek beállításához a Table változóban: CSS fájlunkban , néhány tulajdonságot alkalmazunk a táblára és adatcelláira. Ehhez beállítjuk a „ határ ' ingatlan ' értékkel' 1px tömör ” a szegély beállításához az asztal és a cellái körül, és a „ párnázás ' ingatlan ' értékkel' 3 képpont ” a definiált tér létrehozásához az elemtartalom körül, a meghatározott határnak megfelelően: Mentse el a megadott kódot, nyissa meg a HTML fájlt, és tekintse meg egy tömb objektumainak táblázatát: Fedezzen fel még egy módszert a táblázat létrehozására JavaScript-objektumok tömbjéből. Az ' térkép() ” metódus egy adott függvényt alkalmaz a tömb minden elemére, és cserébe egy új tömböt ad. Ez a módszer azonban nem cserél le az eredeti tömbben. Használhatja a map() metódust is, hogy objektumtömböt tartalmazó táblázatot alkosson. Hozzunk létre egy tömböt a ' hagyja ” kulcsszó. Rendeljen néhány értéket az objektum tulajdonságaihoz vagy kulcsaihoz: Hozzáférés a már létrehozott tárolóhoz a bettlement() metódussal, és használja a ' insertAdjacentHTML() ” módszer a táblázatcímkék hozzáadásához: Használja a ' Object.keys() ” metódussal érheti el a definiált objektum kulcsait, majd használja a „ csatlakozik() ' módszerrel címsorként helyezheti el őket a ' Miután hozzáadtuk a táblázatfej záró címkét és a táblázatsort, valamint az adatnyitó címkét, a „ térkép() ' módszer a ' Object.values() ” metódusfüggvényt az objektumkulcsok minden értékéhez, majd használja a „ csatlakozik() ” módszerrel helyezheti el őket egy sorban, és léphet a következőre: Amint láthatja, sikeresen létrehoztuk a táblázatot az objektumok meghatározott tömbjéből: Áttekintettük azokat a hatékony módszereket, amelyek segítségével JavaScriptben objektumok tömbjéből hozhat létre táblázatot. A JavaScriptben egy táblázat létrehozásához objektumtömbből a HTML ' asztal ' karakterlánc vagy ' térkép() ” módszer használható. Ehhez adjon meg egy div címkét egy azonosítóval. Ezután mindkét metódusban deklarálja az objektumok tömbjét, tárolja a táblázatcímkéket a változókban, vagy közvetlenül adja vissza őket egy csatlakoztatott HTML-elemhez adatokkal. Ez a bejegyzés azt a módszert tárgyalja, amellyel JavaScriptet használva lehet táblázatot létrehozni objektumok tömbjéből.
tömb volt = [ 'Mark' , 'Veréb' , 'Hal' , 'Narancssárga' ] ;
' ;
” címke. Ezután deklaráljon egy változót ' a ' az index növeléséhez ' én ”, és adjon meg egy „ ha ” feltételt oly módon, hogy ha a maradék cellaértékek és a létrehozott változó egyenlő nullával, és az érték „ a ” nem egyenlő a tömb hosszával, akkor törje be a táblázat következő sorába vagy sorába: sor. számára Minden egyes ( ( érték, i ) => {
asztal += ` < TD > $ { érték } TD > ` ;
van egy = én + 1 ;
ha ( a % sejteket == 0 && a != sor. hossz ) {
asztal += '' ; '
} } ) ;
dokumentum. lekicsinylés ( 'tartály' ) . belső HTML = asztal ;
határ : 1px tömör ;
párnázás : 3 képpont ;
}
2. módszer: Táblázat létrehozása objektumtömbből a map() metódus használatával JavaScriptben
Példa
{ 'Név' : 'Mark' , 'Kor' : 'Húsz (20)' } ,
{ 'Név' : 'Mit én' , 'Kor' : 'Harminc (30)' } ]
` < asztal >< tr >< th >
” címke: $ { Tárgy . kulcsok ( sor [ 0 ] ) . csatlakozik ( ' ' ) }
. csatlakozik ( '' ) ) . csatlakozik ( ' ' ) } asztal > ` )
Következtetés