Ta objava v spletnem dnevniku bo prikazala postopek ustvarjanja dinamične tabele v JavaScriptu.
Kako dinamično ustvariti tabelo v JavaScriptu?
Oglejmo si primer, ki pojasnjuje, kako bo dinamična tabela ustvarjena v JavaScriptu.
Primer
Za začetek napišite naslednje vrstice v nov dokument HTML, da ustvarite obrazec, ki sprejme podatke in jih nato prikaže v tabeli z dinamičnim dodajanjem:
< div id = 'moj obrazec' >
< h4 > Izpolnite spodnji obrazec : h4 >
< oznaka > Ime : oznaka >
< vrsta vnosa = 'besedilo' id = 'ime' >< št >< št >
< oznaka > Spol : oznaka >
< vrsta vnosa = 'besedilo' id = 'spol' >< št >< št >
< oznaka > Imenovanje : oznaka >
< vrsta vnosa = 'besedilo' id = 'imenovanje' >< št >< št >
< oznaka > Pridruževanje Datum : oznaka >
< vrsta vnosa = 'datum' id = 'datum' >< št >< št >
< ID gumba = 'dodaj' vrednost = 'Dodaj' > Dodajte podatke v tabelo gumb >
div >
V zgornjem delčku kode:
- Najprej ustvarite naslov ' Izpolnite spodnji obrazec: ”.
- Ustvari vnosna polja za » Ime ”, “ Spol ”, “ Imenovanje «, in » JoiningDate ' z dodeljenim ID-jem ' ime ”, “ spol ”, “ imenovanje «, in » datum ”, da vzamete vhodne vrednosti od uporabnika.
- Ti ID-ji se uporabljajo za pridobivanje sklicevanja na elemente v JavaScriptu.
- Nato ustvarite gumb z » onclick ' lastnost, ki bo poklicala ' addTableRow() ” v datoteki skripta, da dodate in prikažete podatke v tabeli:
Tukaj, v datoteko HTML, napišite te vrstice kode, da ustvarite strukturo tabele, kjer bodo podatki dinamično dodani:
< div >
< h4 > Evidenca zaposlenega b > h4 >
< center >
< ID tabele = 'tableData' meja = '1' cellpadding = 'dva' >
< tr >
< td >< b > Ime b > td >
< td >< b > Spol b > td >
< td >< b > Imenovanje b > td >
< td >< b > Datum pridružitve b > td >
tr >
tabela >
center >
div >
V zgornji kodi:
- Ustvarite tabelo z ID-jem ' tableData «, ki bo uporabljen v datoteki skripta za pridobitev sklica na to tabelo in nato dodajanje podatkov vanjo.
- Tabela vsebuje štiri stolpce, ' Ime ”, “ Spol ”, “ Imenovanje «, in » Datum pridružitve «, ki bo shranil podatke glede na imena stolpcev.
Zagon datoteke HTML bo povzročil naslednje rezultate brskalnika:
Dodajmo funkcionalnost za dinamično ustvarjanje tabel z uporabo JavaScripta. V skriptni datoteki ali oznaki uporabite spodnjo kodo, ki bo dinamično ustvarila tabelo:
funkcijo addTableRow ( ) {je bil ime = dokument. getElementById ( 'ime' ) ;
je bil spol = dokument. getElementById ( 'spol' ) ;
je bil imenovanje = dokument. getElementById ( 'imenovanje' ) ;
je bil datum = dokument. getElementById ( 'datum' ) ;
je bil tabela = dokument. getElementById ( 'tableData' ) ;
je bil rowCount = tabela. vrstice . dolžina ;
je bil vrstica = tabela. vstavi vrstico ( rowCount ) ;
vrstica. vstavi celico ( 0 ) . notranjiHTML = ime. vrednost ;
vrstica. vstavi celico ( 1 ) . notranjiHTML = spol. vrednost ;
vrstica. vstavi celico ( dva ) . notranjiHTML = imenovanje. vrednost ;
vrstica. vstavi celico ( 3 ) . notranjiHTML = datum. vrednost ;
}
V zgornjem delčku:
- Najprej definirajte funkcijo ' addTableRow() «, ki bo sprožil dogodek klika gumba HTML.
- Nato pridobite referenco vseh vnosnih polj enega za drugim z uporabo njihovih dodeljenih ID-jev z uporabo ' getelementById() ” in jih shranite v spremenljivke.
- Te spremenljivke bodo uporabljene za pridobitev vrednosti vnosnih polj s pomočjo HTML-ja ' vrednost ' in jih nastavite v posameznih celicah v tabeli z uporabo ' notranjiHTML ” lastnina.
- Dodajte vrstice v tabelo z uporabo » tabela.vrstice.dolžina ” in nato vanjo shrani vrednosti.
Izhod
Zgornji izhod kaže, da je bila dinamična tabela uspešno ustvarjena z dodajanjem podatkov v obrazec s pomočjo JavaScripta.
Zaključek
Dinamična tabela je ustvarjena z uporabo različnih lastnosti HTML z vnaprej določenimi metodami JavaScript. Najprej ustvarite obrazec v datoteki HTML in nato pridobite referenco polj z uporabo vnaprej določenih metod JavaScript, kot je » getElementById() ' in nato pridobite njihove vnesene vrednosti z uporabo ' vrednost ” lastnina. Nastavite te vrednosti v ustreznih stolpcih tabele z uporabo ' notranjiHTML ” lastnina. Ta objava v spletnem dnevniku prikazuje postopek ustvarjanja dinamične tabele v JavaScriptu.