Jak vytvořit tabulku z pole objektů v JavaScriptu

Na webové stránce mohou nezarovnaná data snížit čitelnost a způsobit divákům problémy. K řešení takových situací můžete využít tabulky k lepšímu třídění dat. Tabulky poskytují skvělý formát pro zarovnání dat a zlepšují čitelnost a viditelnost. Jako tabulky lze vytvářet pomocí jazyka HyperText Markup Language (HTML), který lze propojit s JavaScriptem.

Tento příspěvek vysvětlí postup vytvoření tabulky s polem objektů v JavaScriptu.

Jak vytvořit tabulku z pole objektů v JavaScriptu?

K vytvoření tabulky z pole objektů použijeme následující metody:

Řetězec tabulky HTML
metodu map().

Pojďme prozkoumat každou metodu jednu po druhé!

Metoda 1: Vytvoření tabulky z pole objektů pomocí řetězce HTML tabulky v JavaScriptu

V JavaScriptu je účelem „ tětiva ” slouží k uložení textu, čísel nebo speciálních symbolů. Řetězce jsou definovány uzavřením znaku nebo skupiny znaků do dvojitých nebo jednoduchých uvozovek. Konkrétněji se také používají pro vytváření tabulek.

Vezměme si příklad, abychom získali jasnou představu o vytvoření tabulky z pole objektů pomocí řetězce Table.

Příklad

V našem příkladu použijeme „

'značka s ID' kontejner “ a umístěte jej do značky našeho souboru HTML:

< div id = 'kontejner' > div >

Vyhlásíme „ pole “ a přiřaďte mu nějaké hodnoty:

bylo pole = [ 'Označit' , 'Vrabec' , 'Ryba' , 'Oranžový' ] ;

Inicializovat proměnnou ' Stůl ” pro uložení řetězce HTML tabulky:

var Tabulka = '' ;

Určete dvě buňky na řádek nastavením hodnoty „ dva “ z “ buňky 'proměnná:

každá buňka = dva ;

Dále použijte „ array.for Each() ” pro předání každého prvku pole z funkce. Poté nastavte „ {hodnota} “s identifikátorem” $ ' v rámci '

' ;
} } ) ;
Přiřaďte uzavírací značky tabulky k proměnné „ Stůl ' za použití ' += “ operátor. Poté propojte obsah tabulky s vytvořeným kontejnerem pomocí jeho kontejneru. K tomu použijte „ ponižování() ” a předejte jí id a umístěte vnitřní HTML pro nastavení hodnot v proměnné Table:
Stůl += '

” tag. Dále deklarujte proměnnou ' A “ přidat pro zvýšení indexu “ i “ a zadejte „ -li ” podmínku tak, že pokud je zbytek hodnot buněk a vytvořená proměnná rovna nule a hodnota “ A “ se nerovná délce pole, pak se rozlomte na další řádek nebo řádek tabulky:

pole. pro Každý ( ( hodnota, tj ) => {
Stůl += ' < TD > $ { hodnota } TD > ' ;
tady je = i + 1 ;
-li ( A % buňky == 0 && A != pole. délka ) {
Stůl += '

' ;

dokument. zlehčování ( 'kontejner' ) . vnitřní HTML = Stůl ;
V našem souboru CSS , použijeme některé vlastnosti na tabulku a její datové buňky. Za tímto účelem nastavíme „ okraj 'vlastnost s hodnotou' 1px pevný “ pro nastavení ohraničení kolem tabulky a jejích buněk a „ vycpávka 'vlastnost s hodnotou' 3px ” pro vygenerování definovaného prostoru kolem obsahu prvku podle definovaného okraje:
stůl,TD {

okraj : 1px pevný ;

vycpávka : 3px ;

}
Uložte daný kód, otevřete svůj HTML soubor a prohlédněte si tabulku objektů pole:

Pojďme prozkoumat ještě jednu metodu pro vytvoření tabulky z řady objektů v JavaScriptu.

Metoda 2: Vytvoření tabulky z pole objektů pomocí metody map() v JavaScriptu

' mapa() Metoda ” aplikuje specifickou funkci na každý prvek pole a na oplátku poskytuje nové pole. Tato metoda však neprovádí žádné nahrazení v původním poli. Můžete také použít metodu map() k vytvoření tabulky s polem objektů.

Příklad

Vytvořme pole pomocí „ nechat “. Přiřaďte některé hodnoty vlastnostem objektu nebo klíčům:
nechat pole = [
{ 'Název' : 'Označit' , 'Stáří' : 'Dvacet (20)' } ,
{ 'Název' : 'Co já' , 'Stáří' : 'Třicet (30)' } ]
Získejte přístup k již vytvořenému kontejneru pomocí metody belittlement() a použijte „ insertAdjacentHTML() ” metoda pro přidání značek tabulky:
dokument. zlehčování ( 'kontejner' ) . insertAdjacentHTML ( 'potom' ,

' < stůl < tr < čt >
Použijte „ Object.keys() ” pro přístup ke klíčům definovaného objektu a poté použijte “ připojit() ” způsob, jak je umístit jako nadpisy v rámci “ značka ”:
$ { Objekt . klíče ( pole [ 0 ] ) . připojit ( '' ) }
Po přidání značky pro uzavření záhlaví tabulky a značky pro otevření řádku tabulky a dat použijeme „ mapa() ” způsob volání metody “ Object.values() ” metodu pro každou hodnotu objektových klíčů, poté použijte “ připojit() ” způsob, jak je umístit do řádku a přejít na další:
čt < tr < TD > $ { pole. mapa ( a => Objekt . hodnoty ( a )

. připojit ( '' ) ) . připojit ( '' ) } stůl > ' )
Jak můžete vidět, úspěšně jsme vytvořili tabulku z definovaného pole objektů:

Pokryli jsme efektivní způsoby, jak vytvořit tabulku z řady objektů v JavaScriptu.

Závěr

V JavaScriptu se pro vytvoření tabulky z pole objektů používá HTML „ stůl 'řetězec nebo' mapa() “ lze použít metodu. Chcete-li tak učinit, zadejte značku div s id. Poté deklarujte pole objektů v obou metodách, uložte značky tabulky do proměnných nebo je přímo vraťte do připojeného prvku HTML s daty. Tento příspěvek pojednává o metodě vytváření tabulky z pole objektů pomocí JavaScriptu.

Jak vytvořit tabulku z pole objektů v JavaScriptu