Овај блог пост ће демонстрирати процес креирања динамичке табеле у ЈаваСцрипт-у.
Како динамички креирати табелу у ЈаваСцрипт-у?
Погледајмо пример који објашњава како ће се динамичка табела креирати у ЈаваСцрипт-у.
Пример
За почетак, напишите следеће редове у новом ХТМЛ документу да бисте креирали образац који узима податке, а затим их приказује у табели додавањем динамички:
< див ид = 'мој облик' >
< х4 > Попуните доњи образац : х4 >
< етикета > Име : етикета >
< тип уноса = 'текст' ид = 'име' >< бр >< бр >
< етикета > Пол : етикета >
< тип уноса = 'текст' ид = 'пол' >< бр >< бр >
< етикета > Ознака : етикета >
< тип уноса = 'текст' ид = 'одредба' >< бр >< бр >
< етикета > Придруживање Датум : етикета >
< тип уноса = 'датум' ид = 'датум' >< бр >< бр >
< дугме ид = 'додати' вредност = 'Додати' > Додајте податке у табелу дугме >
див >
У горњем исечку кода:
- Прво направите наслов „ Попуните доњи образац: ”.
- Направите поља за унос за „ Име ”, “ Пол ”, “ Ознака ', и ' ЈоинингДате “ са додељеним ИД-ом “ име ”, “ роду ”, “ ознака ', и ' датум ” респективно, да преузмете улазне вредности од корисника.
- Ови ИД-ови се користе за добијање референце елемената у ЈаваСцрипт-у.
- Затим креирајте дугме са „ онцлицк ” својство које ће звати „ аддТаблеРов() ” функција у датотеци скрипте, за додавање и приказ података у табели:
Овде, у ХТМЛ датотеци, напишите ове линије кода да бисте креирали структуру табеле, где ће подаци бити динамички додавани:
< див >
< х4 > Емплоиее Рецорд б > х4 >
< центар >
< ид табеле = 'таблеДата' граница = '1' целлпаддинг = 'два' >
< тр >
< тд >< б > Име б > тд >
< тд >< б > Пол б > тд >
< тд >< б > Ознака б > тд >
< тд >< б > Датум придруживања б > тд >
тр >
сто >
центар >
див >
У горњем коду:
- Направите табелу са ИД-ом “ таблеДата ” који ће се користити у датотеци скрипте за добијање референце ове табеле и затим додавање података у њу.
- Табела садржи четири колоне, „ Име ”, “ Пол ”, “ Ознака ', и ' Датум придруживања ” који ће чувати податке према називима колона.
Покретање ХТМЛ датотеке резултираће следећим излазом претраживача:
Хајде да додамо функционалност за динамичко креирање табела користећи ЈаваСцрипт. У датотеци или ознаци скрипте користите код у наставку који ће динамички креирати табелу:
функција аддТаблеРов ( ) {био име = документ. гетЕлементБиИд ( 'име' ) ;
био роду = документ. гетЕлементБиИд ( 'пол' ) ;
био ознака = документ. гетЕлементБиИд ( 'одредба' ) ;
био датум = документ. гетЕлементБиИд ( 'датум' ) ;
био сто = документ. гетЕлементБиИд ( 'таблеДата' ) ;
био ровЦоунт = сто. редова . дужина ;
био ред = сто. инсертРов ( ровЦоунт ) ;
ред. инсертЦелл ( 0 ) . иннерХТМЛ = име. вредност ;
ред. инсертЦелл ( 1 ) . иннерХТМЛ = роду. вредност ;
ред. инсертЦелл ( два ) . иннерХТМЛ = ознака. вредност ;
ред. инсертЦелл ( 3 ) . иннерХТМЛ = датум. вредност ;
}
У горњем исечку:
- Прво дефинишите функцију ' аддТаблеРов() ” који ће покренути догађај клика на ХТМЛ дугме.
- Затим узмите референцу свих поља за унос једно по једно користећи њихове одговарајуће додељене ИД-ове користећи „ гетелементБиИд() ” и сачувајте их у променљивим.
- Ове променљиве ће се користити за добијање вредности поља за унос користећи ХТМЛ “ вредност ” и поставите их у појединачне ћелије у табели користећи „ иннерХТМЛ ' имовина.
- Додајте редове у табелу користећи „ табела.редова.дужина ” својство, а затим сачувајте вредности у њему.
Излаз
Горњи излаз указује да је динамичка табела успешно креирана додавањем података у образац помоћу ЈаваСцрипт-а.
Закључак
Динамичка табела је креирана коришћењем различитих ХТМЛ својстава са ЈаваСцрипт унапред дефинисаним методама. Прво направите образац у ХТМЛ датотеци, а затим набавите референцу поља користећи ЈаваСцрипт унапред дефинисане методе као што је „ гетЕлементБиИд() ”, а затим преузмите њихове унете вредности користећи „ вредност ' имовина. Поставите ове вредности у одговарајуће колоне табеле користећи „ иннерХТМЛ ' имовина. Овај блог пост демонстрира процес креирања динамичке табеле у ЈаваСцрипт-у.