Овај пост ће објаснити процедуру за формирање табеле са низом објеката у ЈаваСцрипт-у.
Како направити табелу од низа објеката у ЈаваСцрипт-у?
Да бисмо креирали табелу од низа објеката, користићемо следеће методе:
Хајде да истражимо сваки метод један по један!
Метод 1: Креирајте табелу из низа објеката користећи ХТМЛ стринг табеле у ЈаваСцрипт-у
У ЈаваСцрипт-у, сврха „ низ ” је за чување текста, бројева или посебних симбола. Низови се дефинишу затварањем знака или групе знакова у двоструким или једноструким наводницима. Тачније, они се такође користе за креирање табела.
Узмимо пример да добијемо јасан концепт о креирању табеле од низа објеката помоћу стринга Табле.
Пример
У нашем примеру користићемо „ <див> ” ознака са ИД-ом “ контејнер ” и поставите га у ознаку <боди> наше ХТМЛ датотеке:
< див ид = 'контејнер' > див >Хајде да прогласимо „ низ ” и доделите му неке вредности:
био низ = [ 'Марк' , 'Врабац' , 'риба' , 'наранџаста' ] ;
Иницијализујте променљиву „ Сто ” за складиштење стринга ХТМЛ табеле:
вар Табле = '<табела><тр>' ;Одредите две ћелије по реду тако што ћете поставити вредност „ два ' од ' ћелије ' променљива:
свака ћелија = два ;Затим користите „ низ.за сваки() ” за прослеђивање сваког елемента низа из функције. Затим поставите „ {валуе} ” са идентификатором “ $ ' унутар ' <ТД> ” ознака. Затим, декларишете променљиву „ а ” да додате за повећање индекса “ и ”, и наведите „ ако ” услов на такав начин да ако је остатак вредности ћелија и креирана променљива једнака нули и вредност “ а ” није једнака дужина низа, а затим пређите на следећи ред или ред табеле:
низ. за Сваки ( ( вредност, тј ) => {Сто += ` < ТД > $ { вредност } ТД > ` ;
има = и + 1 ;
ако ( а % ћелије == 0 && а != низ. дужина ) {
Сто += '<тр>' ;
} } ) ;
Додели ознаке за затварање табеле променљивој „ Сто ' помоћу ' += ” оператор. Затим повежите садржај табеле са креираним контејнером користећи његов контејнер. За то користите „ омаловажавање() ” и проследите му ид и поставите унутрашњи ХТМЛ да бисте поставили вредности унутар табеле променљиве:
Сто += '' ;документ. омаловажавање ( 'контејнер' ) . унутрашњи ХТМЛ = Сто ;
У нашој ЦСС датотеци , применићемо нека својства на табелу и њене ћелије са подацима. Да бисмо то урадили, поставићемо „ граница ” својство са вредношћу “ 1пк солид ” да поставите ивицу око табеле и њених ћелија и „ паддинг ” својство са вредношћу “ 3пк ” за генерисање дефинисаног простора око садржаја елемента, према дефинисаној ивици:
сто,ТД {граница : 1пк солид ;
паддинг : 3пк ;
}
Сачувајте дати код, отворите своју ХТМЛ датотеку и погледајте своју табелу објеката низа:
Хајде да истражимо још један метод за креирање табеле од низа објеката у ЈаваСцрипт-у.
Метод 2: Креирајте табелу из низа објеката помоћу методе мап() у ЈаваСцрипт-у
„ Мапа() ” примењује специфичну функцију на сваки елемент низа, а заузврат обезбеђује нови низ. Међутим, овај метод не прави никакве замене у оригиналном низу. Такође можете да користите метод мап() да формирате табелу са низом објеката.
Пример
Хајде да направимо низ користећи „ дозволити ” кључна реч. Доделите неке вредности особинама или кључевима објекта:
нека низ = [{ 'име' : 'Марк' , 'старост' : 'Двадесет (20)' } ,
{ 'име' : 'Шта ја' , 'старост' : 'Тридесет (30)' } ]
Приступите већ креираном контејнеру помоћу методе омаловажавања() и користите „ инсертАдјацентХТМЛ() ” за додавање ознака табеле:
документ. омаловажавање ( 'контејнер' ) . инсертАдјацентХТМЛ ( 'после' ,` < сто >< тр >< тх >
Користити ' Објецт.кеис() ” да приступите кључевима дефинисаног објекта, а затим користите „ придружити() ” начин да их поставите као наслове унутар „ <тх> ” ознака:
$ { Објекат . кључеви ( низ [ 0 ] ) . придружити ( '<тх>' ) }Након што додамо ознаку за затварање главе табеле и ред табеле и ознаку за отварање података, користићемо „ Мапа() ” метод за позивање „ Објецт.валуес() ” функцију методе за сваку вредност кључева објекта, а затим користите „ придружити() ” да их поставите у ред и пређете на следећи:
тх >< тр >< ТД > $ { низ. Мапа ( и => Објекат . вредности ( и ). придружити ( '<ТД>' ) ) . придружити ( '<тр><ТД>' ) } сто > ` )
Као што видите, успешно смо креирали табелу од дефинисаног низа објеката:
Покрили смо ефикасне начине за креирање табеле од низа објеката у ЈаваСцрипт-у.
Закључак
У ЈаваСцрипт-у, за формирање табеле од низа објеката, ХТМЛ „ сто ” стринг или “ Мапа() ” може се користити метода. Да бисте то урадили, наведите див ознаку са ИД-ом. Затим, декларишете низ објеката у обе методе, чувајте ознаке табеле унутар променљивих или их директно вратите повезаном ХТМЛ елементу са подацима. Овај пост је расправљао о методи за креирање табеле од низа објеката користећи ЈаваСцрипт.