See postitus selgitab JavaScriptis objektide massiiviga tabeli moodustamise protseduuri.
Kuidas luua JavaScriptis objektide massiivist tabelit?
Tabeli loomiseks objektide massiivist kasutame järgmisi meetodeid.
Uurime iga meetodit ükshaaval!
1. meetod: looge tabel objektide massiivist, kasutades JavaScriptis HTML-i tabelistringi
JavaScriptis on „ string ” on teksti, numbrite või erisümbolite salvestamiseks. Stringid määratletakse märgi või tähemärkide rühma sulgemisega topelt- või üksikjutumärkides. Täpsemalt kasutatakse neid ka tabelite loomiseks.
Võtame näite, et saada selge kontseptsioon tabeli loomise kohta objektide massiivist, kasutades tabeli stringi.
Näide
Meie näites kasutame ' Kuulutame välja ' massiivi ” ja määrake sellele mõned väärtused: Muutuja initsialiseerimine ' Tabel HTML-tabeli stringi salvestamiseks: Määrake kaks lahtrit rea kohta, määrates väärtuse ' kaks ' selle ' rakud ” muutuja: Järgmisena kasutage ' array.for Every() ” meetod iga massiivi elemendi edastamiseks funktsioonist. Seejärel määrake ' {value} 'identifikaatoriga' $ ' jaotises ' Määrake muutujale ' tabeli sulgemise sildid Tabel ' kasutades ' += ” operaator. Seejärel linkige tabeli sisu selle konteineri abil loodud konteineriga. Selleks kasutage ' alandamine () ” meetod ja edastage sellele ID ning asetage sisemine HTML väärtuste määramiseks muutuja Tabeli sees: Meie CSS-failis , rakendame tabelile ja selle andmerakkudele mõningaid omadusi. Selleks määrame ' piir ' vara väärtusega ' 1px tahke ', et määrata ääris tabeli ja selle lahtrite ümber ning ' polsterdus ' vara väärtusega ' 3 pikslit ” määratletud ruumi genereerimiseks elemendi sisu ümber vastavalt määratletud piirile: Salvestage antud kood, avage HTML-fail ja vaadake massiivi objektide tabelit: Uurime veel üht meetodit JavaScripti objektide massiivist tabeli loomiseks. ' kaart () ” meetod rakendab igale massiivi elemendile kindlat funktsiooni ja annab vastutasuks uue massiivi. Kuid see meetod ei muuda algses massiivi asendusi. Samuti saate kasutada meetodit map() objektide massiiviga tabeli moodustamiseks. Loome massiivi kasutades ' lase ” märksõna. Määrake objekti omadustele või võtmetele mõned väärtused: Juurdepääs juba loodud konteinerile, kasutades meetodit bettlement() ja kasuta ' insertAdjacentHTML() ” meetod tabeli siltide lisamiseks: Kasuta ' Object.keys() ' meetodit, et pääseda juurde määratud objekti võtmetele ja seejärel kasutada ' liitu () ' meetodit, et paigutada need jaotisesse ' Pärast tabeli pea sulgemissildi ja tabelirea ning andmete avamise märgendi lisamist kasutame ' kaart () meetodit, et helistada Object.values() meetodi funktsiooni iga objektiklahvi väärtuse jaoks, seejärel kasutage liitu () ” meetodit, et paigutada need ritta ja liikuda järgmisele: Nagu näete, oleme määratletud objektide massiivist edukalt loonud tabeli: Oleme käsitlenud tõhusaid viise JavaScripti objektide massiivist tabeli loomiseks. JavaScriptis objektide massiivist tabeli moodustamiseks HTML ' laud ' string või ' kaart () ” meetodit saab kasutada. Selleks määrake id-ga div silt. Seejärel deklareerige mõlema meetodi objektide massiiv, salvestage muutujate sees tabelisildid või tagastage need otse ühendatud HTML-i elementi koos andmetega. Selles postituses on käsitletud meetodit tabeli loomiseks objektide massiivist JavaScripti abil.
oli massiiv = [ 'Mark' , 'Varblane' , 'Kala' , 'oranž' ] ;
' ;
” silti. Järgmisena deklareerige muutuja ' a ' indeksi suurendamiseks ' i ' ja määrake ' kui ” tingimus sellisel viisil, et kui ülejäänud lahtrite väärtused ja loodud muutuja on võrdne nulliga ja väärtus „ a ” ei ole massiivi pikkusega võrdne, siis murdke tabeli järgmisele reale või reale: massiivi. jaoks Iga ( ( väärtus, st ) => {
Tabel += ` < TD > $ { väärtus } TD > ` ;
Siin on = i + 1 ;
kui ( a % rakud == 0 && a != massiivi. pikkus ) {
Tabel += '' ; '
} } ) ;
dokument. halvustamist ( 'konteiner' ) . sisemine HTML = Tabel ;
piir : 1px tahke ;
polsterdus : 3 pikslit ;
}
2. meetod: looge tabel objektide massiivist, kasutades JavaScriptis meetodit map().
Näide
{ 'nimi' : 'Mark' , 'vanus' : 'Kakskümmend (20)' } ,
{ 'nimi' : 'Mis mina' , 'vanus' : 'Kolmkümmend (30)' } ]
` < laud >< tr >< th >
” silt: $ { Objekt . võtmed ( massiivi [ 0 ] ) . liituda ( ' ' ) }
. liituda ( '' ) ) . liituda ( ' ' ) } laud > ` )
Järeldus