Jak utworzyć tabelę z tablicy obiektów w JavaScript
Ten post wyjaśni procedurę utworzenia tabeli z szeregiem obiektów w JavaScript.
Jak utworzyć tabelę z tablicy obiektów w JavaScript?
Aby utworzyć tabelę z szeregu obiektów, użyjemy następujących metod:
- String tabeli HTML
- Metoda map ()
Zbadajmy każdą metodę jeden po drugim!
Metoda 1: Utwórz tabelę z tablicy obiektów przy użyciu ciągła tabeli HTML w JavaScript
W JavaScript cel „strunowy”Jest przechowywanie tekstu, liczb lub symboli specjalnych. Sznurki są definiowane przez zamknięcie postaci lub grupy znaków w podwójnych lub pojedynczych cytatach. Mówiąc dokładniej, są one również wykorzystywane do tworzenia tabel.
Weźmy przykład, aby uzyskać jasną koncepcję tworzenia tabeli z tablicy obiektów za pomocą ciągu tabeli.
Przykład
W naszym przykładzie wykorzystamy „„Tag z identyfikatorem”pojemnik”I umieść go w znaczniku naszego pliku HTML:
Zadekorujmy „szyk”I przypisz do niego pewne wartości:
var array = [„Mark”, „Sparrow”, „Fish”, „Orange”];Zainicjuj zmienną ”Tabela„Aby przechowywać ciąg tabeli HTML:
var table = "| ”Tag. Następnie zadeklaruj zmienną „A„Aby dodać do indeksu”I”, I określ„Jeśli„Warunek w taki sposób, że jeśli pozostała część wartości komórek i utworzona zmienna jest równa zero i wartość”A”Nie jest równą długością tablicy, a następnie włam się do następnego wiersza lub wiersza tabeli: szyk.dla każdego ((wartość, i) => Tabela += ' | $ wartość | ';;
dokument.Przestrzeganie („kontener”).wewnętrzny html = tabela;
W naszym pliku CSS, Zastosujemy pewne właściwości do tabeli i jej komórek danych. Aby to zrobić, ustawimy „granica„Własność o wartości”1px stały„Aby ustawić granicę wokół stołu i jej komórek i„wyściółka„Własność o wartości”3px„Aby wygenerować określoną przestrzeń wokół zawartości elementu, zgodnie z zdefiniowaną granicą:
Tabela, tdgranica: 1px stały;
Wyściółka: 3px;
Zapisz dany kod, otwórz plik HTML i wyświetl tabelę obiektów tablicy:
Zbadajmy jeszcze jedną metodę tworzenia tabeli z szeregu obiektów w JavaScript.
Metoda 2: Utwórz tabelę z tablicy obiektów za pomocą metody map () w JavaScript
„„mapa()”Metoda stosuje określoną funkcję do każdego elementu tablicy, aw zamian zapewnia nową tablicę. Jednak ta metoda nie dokonuje żadnych zamienników w oryginalnej tablicy. Możesz także użyć metody MAP () do utworzenia tabeli z tablicą obiektów.
Przykład
Utwórzmy tablicę za pomocą „pozwalać”Słowo kluczowe. Przypisz niektóre wartości do właściwości obiektu lub kluczy:
Niech Array = [„Nazwa”: „Mark”, „Age”: „Twenty (20)”,
„Nazwa”: „che mi”, „wiek”: „trzydzieści (30)”]
Uzyskaj dostęp do już utworzonego kontenera za pomocą metody Selttlement () i wykorzystaj „insertadjacenthtml ()„Metoda dodania tagów tabeli:
dokument.uchylenie („kontener”).insertadjacenthtml („Afterend”,'
| Użyj "Obiekt.Klucze()„Metoda dostępu do klawiszy zdefiniowanego obiektu, a następnie użycie„dołączyć()„Metoda umieszczenia ich jako nagłówków w„ Po dodaniu znacznika zamykania głowicy stołowej i znacznika otwierającego wiersz tabel i danych, użyjemy „mapa()„Metoda wywołania„Obiekt.wartości ()„Funkcja metody dla każdej wartości kluczy obiektowych, a następnie użyj„dołączyć()„Metoda umieszczenia ich w rzędu i przejścia do następnego: |
|---|
Jak widać, pomyślnie utworzyliśmy tabelę z zdefiniowanej gamy obiektów:
Omówiliśmy wydajne sposoby tworzenia tabeli z szeregu obiektów w JavaScript.
Wniosek
W JavaScript, dla tworzenia tabeli z szeregu obiektów, html „tabela”Ciąg lub„mapa()„Można zastosować metodę. Aby to zrobić, określ tagi z identyfikatorem. Następnie zadeklaruj tablicę obiektów w obu metodach, przechowuj znaczniki tabeli w zmiennych lub bezpośrednio zwróć je do podłączonego elementu HTML z danymi. W tym poście omówiono metodę tworzenia tabeli z tablicy obiektów za pomocą JavaScript.