Dette indlæg vil forklare proceduren til at danne en tabel med en række objekter i JavaScript.
Hvordan opretter man tabel fra en række objekter i JavaScript?
For at oprette en tabel ud fra en række objekter, vil vi bruge følgende metoder:
Lad os udforske hver metode en efter en!
Metode 1: Opret tabel fra en række objekter ved hjælp af HTML-tabelstreng i JavaScript
I JavaScript er formålet med en ' snor ” er at gemme tekst, tal eller specielle symboler. Strenge defineres ved at lukke et tegn eller en gruppe af tegn i dobbelte eller enkelte anførselstegn. Mere specifikt bruges de også til at lave tabeller.
Lad os tage et eksempel for at få et klart koncept om at oprette en tabel fra en række objekter ved hjælp af tabelstrengen.
Eksempel
I vores eksempel vil vi bruge en ' Lad os erklære et ' array ' og tildel nogle værdier til det: Initialiser en variabel ' Bord ' for at gemme HTML-tabelstrengen: Angiv de to celler pr. række ved at indstille værdien ' to ' af ' celler variabel: Brug derefter ' array.for Every() ” metode til at sende hvert array-element fra funktionen. Indstil derefter ' {værdi} ' med en identifikator ' $ ' indenfor ' Tildel tabelafslutningstags til variablen ' Bord ' bruger ' += ” operatør. Link derefter indholdet af tabellen til den oprettede container ved hjælp af dens container. Til det skal du bruge ' nedgøring() ”-metoden og send id'et til den og placer den indre HTML for at indstille værdierne i variablen Tabel: I vores CSS-fil , vi vil anvende nogle egenskaber til tabellen og dens dataceller. For at gøre det vil vi indstille ' grænse ' ejendom med værdien ' 1px solid ' for at sætte grænsen omkring bordet og dets celler og ' polstring ' ejendom med værdien ' 3 px ” for at generere det definerede rum omkring elementindholdet i henhold til den definerede kant: Gem den givne kode, åbn din HTML-fil og se din tabel over et arrays objekter: Lad os undersøge endnu en metode til at oprette en tabel fra en række objekter i JavaScript. Det ' kort() ”-metoden anvender en specifik funktion til hvert element i arrayet, og til gengæld giver den et nyt array. Denne metode foretager dog ingen udskiftninger i det originale array. Du kan også bruge map()-metoden til at danne en tabel med en række objekter. Lad os oprette et array ved hjælp af ' lade ” nøgleord. Tildel nogle værdier til objektegenskaberne eller nøglerne: Få adgang til den allerede oprettede container ved at bruge belittlement()-metoden og brug ' indsætAdjacentHTML() ” metode til at tilføje tabel-tags: Brug ' Object.keys() ” metode for at få adgang til nøglerne til det definerede objekt og derefter bruge tilslutte() ' metode til at placere dem som overskrifter i ' Efter tilføjelse af tabelhovedets lukketag og tabelrække og dataåbningstag, vil vi bruge ' kort() ' metode til at kalde ' Object.values() ' metodefunktion for hver værdi af objekttasterne, og brug derefter ' tilslutte() ” metode til at placere dem i en række og gå til næste: Som du kan se, har vi med succes oprettet tabel fra den definerede række af objekter: Vi har dækket de effektive måder at oprette en tabel fra en række objekter i JavaScript. I JavaScript, til dannelse af en tabel fra en række objekter, er HTML ' bord ' streng eller ' kort() ”-metoden kan bruges. For at gøre det skal du angive et div-tag med et id. Deklarer derefter rækken af objekter i begge metoder, gem tabeltags i variabler, eller returner dem direkte til et forbundet HTML-element med data. Dette indlæg har diskuteret metoden til at oprette en tabel fra en række objekter ved hjælp af JavaScript.
var række = [ 'Mærke' , 'Spurv' , 'Fisk' , 'Orange' ] ;
' ;
” tag. Dernæst erklærer du en variabel ' -en ' for at tilføje for at øge indekset ' jeg ', og angiv en ' hvis ' betingelse på en sådan måde, at hvis resten af cellernes værdier og den oprettede variabel er lig med nul og værdien ' -en ” er ikke den samme arrays længde, så bryd ind i næste linje eller række i tabellen: array. til Hver ( ( værdi, dvs ) => {
Bord += ` < TD > $ { værdi } TD > ` ;
der er en = jeg + 1 ;
hvis ( -en % celler == 0 && -en != array. længde ) {
Bord += '' ; '
} } ) ;
dokument. forklejnelse ( 'beholder' ) . indre HTML = Bord ;
grænse : 1px solid ;
polstring : 3 px ;
}
Metode 2: Opret tabel fra en matrix af objekter ved hjælp af map()-metoden i JavaScript
Eksempel
{ 'Navn' : 'Mærke' , 'Alder' : 'Tyve (20)' } ,
{ 'Navn' : 'Hvad, mig' , 'Alder' : 'Tredive (30)' } ]
` < bord >< tr >< th >
' tag: $ { Objekt . nøgler ( array [ 0 ] ) . tilslutte ( ' ' ) }
. tilslutte ( '' ) ) . tilslutte ( ' ' ) } bord > ` )
Konklusion