Paano Gumawa ng Talahanayan Mula sa Isang Array ng Mga Bagay sa JavaScript

Paano Gumawa Ng Talahanayan Mula Sa Isang Array Ng Mga Bagay Sa Javascript



Sa isang webpage, maaaring bawasan ng hindi nakahanay na data ang pagiging madaling mabasa at lumikha ng mga problema para sa mga manonood. Upang matugunan ang mga ganitong sitwasyon, maaari mong gamitin ang mga talahanayan upang pagbukud-bukurin ang data sa isang mas mahusay na paraan. Ang mga talahanayan ay nagbibigay ng isang mahusay na format upang ihanay ang data at mapabuti ang pagiging madaling mabasa at visibility. Dahil ang mga talahanayan ay maaaring gawin gamit ang HyperText Markup language (HTML), na maaaring maiugnay sa JavaScript.

Ipapaliwanag ng post na ito ang pamamaraan upang bumuo ng isang talahanayan na may hanay ng mga bagay sa JavaScript.

Paano Gumawa ng Talahanayan Mula sa isang Array ng Mga Bagay sa JavaScript?

Upang lumikha ng isang talahanayan mula sa isang hanay ng mga bagay, gagamitin namin ang mga sumusunod na pamamaraan:







Tuklasin natin ang bawat pamamaraan nang paisa-isa!



Paraan 1: Lumikha ng Talahanayan Mula sa Isang Array ng Mga Bagay Gamit ang HTML Table String sa JavaScript

Sa JavaScript, ang layunin ng isang ' string ” ay mag-imbak ng teksto, mga numero, o mga espesyal na simbolo. Tinutukoy ang mga string sa pamamagitan ng pagsasara ng character o grupo ng mga character sa doble o solong panipi. Higit na partikular, ginagamit din ang mga ito para sa paglikha ng mga talahanayan.



Kumuha tayo ng isang halimbawa upang makakuha ng malinaw na konsepto tungkol sa paggawa ng isang talahanayan mula sa isang hanay ng mga bagay gamit ang string ng Table.





Halimbawa

Sa aming halimbawa, gagamitin namin ang isang '

'tag na may id' lalagyan ” at ilagay ito sa loob ng tag ng aming HTML file:

< div id = 'lalagyan' > div >

Ipahayag natin ang isang ' array ” at magtalaga ng ilang mga halaga dito:



ay array = [ 'Marka' , 'Maya' , 'isda' , 'Kahel' ] ;

Magsimula ng isang variable ' mesa ” para iimbak ang HTML table string:

var Talahanayan = '' ;

Tukuyin ang dalawang cell sa bawat hilera sa pamamagitan ng pagtatakda ng halaga ' dalawa 'ng' mga selula ” variable:

bawat cell = dalawa ;

Susunod, gamitin ang ' array.for Each() ” paraan upang maipasa ang bawat elemento ng array mula sa function. Pagkatapos, itakda ang ' {value} 'may isang identifier' $ 'sa loob ng'

' ;
} } ) ;

Italaga ang mga tag ng pagsasara ng talahanayan sa variable na “ mesa ' gamit ang ' += ” operator. Pagkatapos, i-link ang nilalaman ng Talahanayan sa ginawang lalagyan gamit ang lalagyan nito. Para diyan, gamitin ang ' pagmamaliit() ” na paraan at ipasa ang id dito at ilagay ang panloob na HTML upang itakda ang mga halaga sa loob ng variable na Talahanayan:

mesa += '
” tag. Susunod, ipahayag ang isang variable na ' a 'upang idagdag sa pagtaas ng index' i ”, at tukuyin ang isang “ kung ” kundisyon sa paraang kung ang natitirang halaga ng mga cell at ang nilikhang variable ay katumbas ng zero at ang halaga “ a ” ay hindi pantay na haba ng array, pagkatapos ay masira sa susunod na linya o hilera ng talahanayan:

array. para sa Ang bawat isa ( ( halaga, i ) => {
mesa += ` < TD > $ { halaga } TD > ` ;
meron isang = i + 1 ;
kung ( a % mga selula == 0 && a != array. haba ) {
mesa += '
'
;

dokumento. pagmamaliit ( 'lalagyan' ) . panloob HTML = mesa ;

Sa aming CSS file , ilalapat namin ang ilang mga katangian sa talahanayan at mga cell ng data nito. Upang gawin ito, itatakda namin ang ' hangganan ' ari-arian na may halaga ' 1px solid ' upang itakda ang hangganan sa paligid ng talahanayan at ang mga cell nito at ang ' padding ' ari-arian na may halaga ' 3px ” upang makabuo ng tinukoy na espasyo sa paligid ng nilalaman ng elemento, ayon sa tinukoy na hangganan:

talahanayan,TD {

hangganan : 1px solid ;

padding : 3px ;

}

I-save ang ibinigay na code, buksan ang iyong HTML file at tingnan ang iyong talahanayan ng mga object ng array:

Tuklasin natin ang isa pang paraan para sa paggawa ng talahanayan mula sa hanay ng mga bagay sa JavaScript.

Paraan 2: Lumikha ng Talahanayan Mula sa Array ng mga Bagay Gamit ang mapa() na pamamaraan sa JavaScript

Ang ' mapa() ” paraan ay naglalapat ng isang partikular na function sa bawat elemento ng array, at bilang kapalit, nagbibigay ito ng bagong array. Gayunpaman, ang pamamaraang ito ay hindi gumagawa ng anumang mga kapalit sa orihinal na hanay. Maaari mo ring gamitin ang map() na paraan upang bumuo ng isang talahanayan na may hanay ng mga bagay.

Halimbawa

Gumawa tayo ng array gamit ang ' hayaan ” keyword. Magtalaga ng ilang value sa mga property o key ng object:

hayaan ang array = [
{ 'Pangalan' : 'Marka' , 'Edad' : 'Dalawampu (20)' } ,
{ 'Pangalan' : 'Anong ako' , 'Edad' : 'Tatlumpu (30)' } ]

I-access ang nagawa nang lalagyan sa pamamagitan ng paggamit ng pamamaraan ng pagmamaliit () at gamitin ang “ insertAdjacentHTML() ” paraan upang idagdag ang mga tag ng talahanayan:

dokumento. pagmamaliit ( 'lalagyan' ) . insertAdjacentHTML ( 'pagkatapos' ,

` < mesa >< tr >< ika >

Gamitin ang ' Object.keys() 'paraan upang ma-access ang mga susi ng tinukoy na bagay at pagkatapos ay gamitin ang ' sumali() 'paraan upang ilagay ang mga ito bilang mga heading sa loob ng ' 'tag:

$ { Bagay . mga susi ( array [ 0 ] ) . sumali ( '' ) }

Pagkatapos idagdag ang table head closing tag at table row at data opening tag, gagamitin namin ang “ mapa() 'paraan ng pagtawag sa ' Object.values() ” method function para sa bawat halaga ng object key, pagkatapos ay gamitin ang “ sumali() ” paraan upang ilagay ang mga ito sa loob ng isang hilera at lumipat sa susunod:

ika >< tr >< TD > $ { array. mapa ( at => Bagay . mga halaga ( at )

. sumali ( '' ) ) . sumali ( '' ) } mesa > ` )

Tulad ng nakikita mo, matagumpay kaming nakagawa ng talahanayan mula sa tinukoy na hanay ng mga bagay:

Sinakop namin ang mga mahusay na paraan upang lumikha ng isang talahanayan mula sa isang hanay ng mga bagay sa JavaScript.

Konklusyon

Sa JavaScript, para sa pagbuo ng isang talahanayan mula sa isang hanay ng mga bagay, ang HTML ' mesa ' string o ' mapa() ” paraan ay maaaring gamitin. Para magawa ito, tumukoy ng div tag na may id. Pagkatapos, ideklara ang hanay ng mga bagay sa parehong paraan, mag-imbak ng mga tag ng talahanayan sa loob ng mga variable, o direktang ibalik ang mga ito sa isang konektadong elemento ng HTML na may data. Tinalakay ng post na ito ang pamamaraan para sa paglikha ng isang talahanayan mula sa isang Array ng mga bagay gamit ang JavaScript.