Hvordan lage tabell fra en rekke objekter i JavaScript
Dette innlegget vil forklare prosedyren for å danne en tabell med en rekke objekter i JavaScript.
Hvordan lage tabell fra en rekke objekter i JavaScript?
For å lage en tabell fra en rekke objekter, bruker vi følgende metoder:
- HTML -tabellstreng
- Kart () Metode
La oss utforske hver metode en etter en!
Metode 1: Lag tabell fra en rekke objekter ved hjelp av HTML -tabellstreng i JavaScript
I JavaScript, formålet med et “streng”Er å lagre tekst, tall eller spesielle symboler. Strenger er definert ved å lukke et tegn eller en gruppe tegn i doble eller enkelt sitater. Mer spesifikt brukes de også til å lage tabeller.
La oss ta et eksempel for å få et klart konsept om å lage en tabell fra en rekke objekter ved hjelp av tabellstrengen.
Eksempel
I vårt eksempel vil vi bruke en "”Tag med en ID”container”Og legg den i taggen til HTML -filen vår:
La oss erklære en “Array”Og tilordne noen verdier til det:
var array = ["Mark", "Sparrow", "Fish", "Orange"];Initialiser en variabel “Bord”For å lagre HTML -tabellstrengen:
var tabell = "| " stikkord. Neste, erklære en variabel “en”For å øke indeksen”Jeg”, Og spesifisere en“hvis”Tilstand på en slik måte at hvis resten av cellerverdier og den opprettede variabelen er lik null og verdien”en”Er ikke lik Array's lengde, og bryter deretter inn i neste linje eller rad i tabellen: Array.for hver ((verdi, i) => Tabell += ' | $ verdi | ';
dokument.nedbrytning ("Container").indre html = tabell;
I vår CSS -fil, Vi vil bruke noen egenskaper på tabellen og dens dataceller. For å gjøre det, vil vi sette "grense”Eiendom med verdien”1px faststoff”For å sette grensen rundt bordet og dens celler og“polstring”Eiendom med verdien”3px”For å generere det definerte rommet rundt elementinnholdet, i henhold til den definerte grensen:
Tabell, TDGrense: 1px faststoff;
polstring: 3px;
Lagre den gitte koden, åpne HTML -filen din og se tabellen over en matrise objekter:
La oss utforske en metode til for å lage en tabell fra en rekke objekter i JavaScript.
Metode 2: Lag tabell fra en rekke objekter ved bruk av MAP () -metode i JavaScript
“kart()”Metode bruker en spesifikk funksjon for hvert element i matrisen, og til gjengjeld gir den en ny matrise. Imidlertid gjør denne metoden ingen erstatninger i den originale matrisen. Du kan også bruke MAP () -metoden for å danne en tabell med en rekke objekter.
Eksempel
La oss lage en matrise ved hjelp av “la”Nøkkelord. Tilordne noen verdier til objektegenskapene eller tastene:
La Array = ["Navn": "Mark", "Alder": "Twenty (20)",
"Navn": "Che Mi", "Age": "Tretti (30)"]]
Få tilgang til den allerede opprettede containeren ved å bruke Belittlement () -metoden og bruke “INSERTADJACENTHTML ()”Metode for å legge til tabellmerker:
dokument.nedbrytning ('container').INSERTADJACENTHTML ('etterfølgende','
| Bruke "Gjenstand.nøkler ()”Metode for å få tilgang til tastene til det definerte objektet og deretter bruke“bli med()”Metode for å plassere dem som overskrifter i“ Etter å ha lagt til tabellhodets lukkende tag og tabellrekke og dataåpningskode, vil vi bruke "kart()”Metode for å ringe“Gjenstand.verdier ()”Metodefunksjon for hver verdi av objekttastene, og bruk deretter“bli med()”Metode for å plassere dem innen en rad og flytte til den neste: |
|---|
Som du kan se, har vi opprettet tabell fra det definerte utvalget av objekter:
Vi har dekket de effektive måtene å lage en tabell fra en rekke objekter i JavaScript.
Konklusjon
I JavaScript, for dannelse av en tabell fra en rekke objekter, HTML “bord”Streng eller“kart()”Metode kan brukes. For å gjøre det, spesifiser en div -tag med en ID. Deler deretter rekke objekter i begge metodene, lagringstabeller i variabler, eller returner dem direkte til et tilkoblet HTML -element med data. Dette innlegget har diskutert metoden for å lage en tabell fra en rekke objekter ved hjelp av JavaScript.