See ajaveebi postitus demonstreerib dünaamilise tabeli loomise protsessi JavaScriptis.
Kuidas JavaScriptis dünaamiliselt tabelit luua?
Vaatame näidet, mis selgitab, kuidas JavaScriptis dünaamiline tabel luuakse.
Näide
Alustuseks kirjutage uude HTML-dokumenti järgmised read, et luua vorm, mis võtab andmeid ja kuvab need seejärel tabelis, lisades need dünaamiliselt:
< divi id = 'minu vorm' >
< h4 > Täida allolev vorm : h4 >
< silt > Nimi : silt >
< sisendi tüüp = 'tekst' id = 'nimi' >< br >< br >
< silt > Sugu : silt >
< sisendi tüüp = 'tekst' id = 'sugu' >< br >< br >
< silt > Määramine : silt >
< sisendi tüüp = 'tekst' id = 'määramine' >< br >< br >
< silt > Liitumine Kuupäev : silt >
< sisendi tüüp = 'kuupäev' id = 'kuupäev' >< br >< br >
< nupu id = 'lisama' väärtus = 'Lisama' > Andmete lisamine tabelisse nuppu >
div >
Ülaltoodud koodilõigul:
- Esmalt looge pealkiri ' Täida allolev vorm: ”.
- Loo sisestusväljad jaoks ' Nimi ”, “ Sugu ”, “ Määramine ”, ja „ Liitumise kuupäev 'määratud ID-ga' nimi ”, “ sugu ”, “ määramine ”, ja „ kuupäeva ” vastavalt, et võtta kasutajalt sisendväärtused.
- Neid ID-sid kasutatakse JavaScripti elementide viite saamiseks.
- Seejärel looge nupp ' onclick ' vara, mis kannab nime ' addTableRow() funktsioon skriptifailis andmete lisamiseks ja kuvamiseks tabelis:
Kirjutage siia HTML-faili need koodiread, et luua tabeli struktuur, kuhu andmed dünaamiliselt lisatakse:
< div >
< h4 > Töötaja rekord b > h4 >
< Keskus >
< tabeli id = 'tabeliandmed' piir = '1' rakutäitmine = 'kaks' >
< tr >
< td >< b > Nimi b > td >
< td >< b > Sugu b > td >
< td >< b > Määramine b > td >
< td >< b > Liitumise kuupäev b > td >
tr >
laud >
Keskus >
div >
Ülaltoodud koodis:
- Looge tabel ID-ga ' tabelAndmed ”, mida kasutatakse skriptifailis selle tabeli viite saamiseks ja seejärel andmete lisamiseks.
- Tabel sisaldab nelja veergu ' Nimi ”, “ Sugu ”, “ Määramine ”, ja „ Liitumise kuupäev ”, mis salvestab andmeid veergude nimede järgi.
HTML-faili käivitamine annab tulemuseks järgmise brauseri väljundi:
Lisame funktsioonid tabelite dünaamiliseks loomiseks JavaScripti abil. Kasutage skriptifailis või märgendis allolevat koodi, mis loob tabeli dünaamiliselt:
funktsiooni lisa tabelirida ( ) {oli nimi = dokument. getElementById ( 'nimi' ) ;
oli sugu = dokument. getElementById ( 'sugu' ) ;
oli määramine = dokument. getElementById ( 'määramine' ) ;
oli kuupäeva = dokument. getElementById ( 'kuupäev' ) ;
oli laud = dokument. getElementById ( 'tabeliandmed' ) ;
oli ridade arv = laud. read . pikkus ;
oli rida = laud. insertRow ( ridade arv ) ;
rida. insertCell ( 0 ) . sisemine HTML = nimi. väärtus ;
rida. insertCell ( 1 ) . sisemine HTML = sugu. väärtus ;
rida. insertCell ( kaks ) . sisemine HTML = määramine. väärtus ;
rida. insertCell ( 3 ) . sisemine HTML = kuupäeva. väärtus ;
}
Ülaltoodud lõigus:
- Esmalt määrake funktsioon ' addTableRow() ”, mis käivitab HTML-nupu klõpsamise.
- Seejärel hankige ükshaaval kõigi sisestusväljade viited, kasutades neile määratud ID-sid, kasutades ' getelementById() ” meetodit ja salvestage need muutujatena.
- Neid muutujaid kasutatakse sisestusväljade väärtuse saamiseks HTML-i abil väärtus ' atribuuti ja määrake need tabeli üksikutesse lahtritesse, kasutades ' sisemine HTML ” vara.
- Lisage tabelisse ridu, kasutades ' tabel.ridad.pikkus ” atribuut ja seejärel salvestada sellesse väärtusi.
Väljund
Ülaltoodud väljund näitab, et dünaamiline tabel on edukalt loodud, lisades JavaScripti kasutavale vormile andmed.
Järeldus
Dünaamiline tabel luuakse erinevate HTML-i atribuutide abil JavaScripti eelmääratletud meetoditega. Esiteks looge HTML-failis vorm ja seejärel hankige väljade viited JavaScripti eelmääratletud meetodite abil, näiteks ' getElementById() ' meetodit ja seejärel hankige nende sisestatud väärtused, kasutades ' väärtus ” vara. Määrake need väärtused tabeli vastavatesse veergudesse, kasutades ' sisemine HTML ” vara. See ajaveebi postitus demonstreerib JavaScriptis dünaamilise tabeli loomise protsessi.