Šajā emuāra ziņojumā tiks parādīts dinamiskas tabulas izveides process JavaScript.
Kā dinamiski izveidot tabulu JavaScript?
Apskatīsim piemēru, kurā paskaidrots, kā JavaScript tiks izveidota dinamiska tabula.
Piemērs
Lai sāktu, jaunā HTML dokumentā ierakstiet šādas rindiņas, lai izveidotu veidlapu, kas ņem datus un pēc tam parāda tos tabulā, dinamiski pievienojot:
< div id = 'mana forma' >
< h4 > Aizpildiet zemāk esošo formu : h4 >
< etiķete > Vārds : etiķete >
< ievades veids = 'teksts' id = 'vārds' >< br >< br >
< etiķete > Dzimums : etiķete >
< ievades veids = 'teksts' id = 'dzimums' >< br >< br >
< etiķete > Apzīmējums : etiķete >
< ievades veids = 'teksts' id = 'apzīmējums' >< br >< br >
< etiķete > Pievienojas Datums : etiķete >
< ievades veids = 'datums' id = 'datums' >< br >< br >
< pogas id = 'pievienot' vērtību = 'Pievienot' > Pievienojiet datus tabulai pogu >
div >
Iepriekš minētajā koda fragmentā:
- Vispirms izveidojiet virsrakstu ' Aizpildiet zemāk esošo formu: ”.
- Izveidojiet ievades laukus “ Vārds ”, “ Dzimums ”, “ Apzīmējums ', un ' Pievienošanās datums 'ar piešķirtajiem ID' nosaukums ”, “ dzimums ”, “ apzīmējums ', un ' datums ”, lai ņemtu ievades vērtības no lietotāja.
- Šie ID tiek izmantoti, lai iegūtu atsauces uz JavaScript elementiem.
- Pēc tam izveidojiet pogu ar ' onclick 'īpašums, kas sauksies ' addTableRow() ” funkciju skripta failā, lai pievienotu un parādītu datus tabulā:
Šeit HTML failā ierakstiet šīs koda rindiņas, lai izveidotu tabulas struktūru, kurā dati tiks dinamiski pievienoti:
< div >
< h4 > Darbinieku ieraksts b > h4 >
< centrs >
< tabulas id = 'tableData' robeža = '1' šūnu polsterējums = 'divi' >
< tr >
< td >< b > Vārds b > td >
< td >< b > Dzimums b > td >
< td >< b > Apzīmējums b > td >
< td >< b > Pievienošanās datums b > td >
tr >
tabula >
centrs >
div >
Iepriekš minētajā kodā:
- Izveidojiet tabulu ar ID ' tabulaDati ”, kas tiks izmantots skripta failā, lai iegūtu atsauci uz šo tabulu un pēc tam pievienotu tai datus.
- Tabulā ir četras kolonnas, ' Vārds ”, “ Dzimums ”, “ Apzīmējums ', un ' Pievienošanās datums ”, kas saglabās datus atbilstoši kolonnu nosaukumiem.
Palaižot HTML failu, tiks parādīta šāda pārlūkprogrammas izvade:
Pievienosim funkcionalitāti tabulu dinamiskai izveidei, izmantojot JavaScript. Skripta failā vai tagā izmantojiet tālāk norādīto kodu, kas dinamiski izveidos tabulu:
funkciju addTableRow ( ) {bija nosaukums = dokumentu. getElementById ( 'vārds' ) ;
bija dzimums = dokumentu. getElementById ( 'dzimums' ) ;
bija apzīmējums = dokumentu. getElementById ( 'apzīmējums' ) ;
bija datums = dokumentu. getElementById ( 'datums' ) ;
bija tabula = dokumentu. getElementById ( 'tableData' ) ;
bija rindu skaits = tabula. rindas . garums ;
bija rinda = tabula. ievietotRindu ( rindu skaits ) ;
rinda. ievietotCell ( 0 ) . innerHTML = nosaukums. vērtību ;
rinda. ievietotCell ( 1 ) . innerHTML = dzimums. vērtību ;
rinda. ievietotCell ( divi ) . innerHTML = apzīmējums. vērtību ;
rinda. ievietotCell ( 3 ) . innerHTML = datums. vērtību ;
}
Iepriekš minētajā fragmentā:
- Vispirms definējiet funkciju ' addTableRow() ”, kas aktivizēs HTML pogas klikšķa notikumu.
- Pēc tam pa vienam iegūstiet atsauces uz visiem ievades laukiem, izmantojot tiem atbilstošos piešķirtos ID, izmantojot ' getelementById() ” metodi un saglabājiet tos mainīgajos.
- Šie mainīgie tiks izmantoti, lai iegūtu ievades lauku vērtību, izmantojot HTML ' vērtību ' rekvizītu un iestatiet tos atsevišķās tabulas šūnās, izmantojot ' innerHTML ” īpašums.
- Pievienojiet tabulas rindas, izmantojot ' tabula.rindas.garums ” īpašumu un pēc tam glabā tajā vērtības.
Izvade
Iepriekš minētā izvade norāda, ka dinamiskā tabula ir veiksmīgi izveidota, pievienojot datus formā, izmantojot JavaScript.
Secinājums
Dinamiskā tabula tiek izveidota, izmantojot dažādus HTML rekvizītus ar JavaScript iepriekš definētām metodēm. Vispirms izveidojiet veidlapu HTML failā un pēc tam iegūstiet atsauces uz laukiem, izmantojot JavaScript iepriekš definētas metodes, piemēram, ' getElementById() ' metodi un pēc tam izgūstiet to ievadītās vērtības, izmantojot ' vērtību ” īpašums. Iestatiet šīs vērtības tabulas attiecīgajās kolonnās, izmantojot ' innerHTML ” īpašums. Šajā emuāra ziņojumā ir parādīts dinamiskas tabulas izveides process JavaScript.