Dette blogginnlegget vil demonstrere prosessen for å lage en dynamisk tabell i JavaScript.
Hvordan lage en tabell dynamisk i JavaScript?
La oss se et eksempel som forklarer hvordan en dynamisk tabell vil bli opprettet i JavaScript.
Eksempel
For å begynne, skriv følgende linjer i et nytt HTML-dokument for å lage et skjema som tar data og deretter viser det i en tabell ved å legge det til dynamisk:
< div id = 'min form' >
< h4 > Fyll ut skjemaet nedenfor : h4 >
< merkelapp > Navn : merkelapp >
< inndatatype = 'tekst' id = 'Navn' >< br >< br >
< merkelapp > Kjønn : merkelapp >
< inndatatype = 'tekst' id = 'kjønn' >< br >< br >
< merkelapp > Betegnelse : merkelapp >
< inndatatype = 'tekst' id = 'betegnelse' >< br >< br >
< merkelapp > Blir med Dato : merkelapp >
< inndatatype = 'Dato' id = 'Dato' >< br >< br >
< knappen ID = 'legge til' verdi = 'Legge til' > Legg til data i tabellen knapp >
div >
I kodebiten ovenfor:
- Lag først en overskrift ' Fyll ut skjemaet nedenfor: '.
- Opprett inndatafelt for ' Navn ', ' Kjønn ', ' Betegnelse ', og ' Deltakelsesdato ' med tildelte ID-er ' Navn ', ' kjønn ', ' betegnelse ', og ' Dato ” henholdsvis for å ta inngangsverdiene fra brukeren.
- Disse IDene brukes for å få referansen til elementene i JavaScript.
- Deretter oppretter du en knapp med ' ved trykk ' egenskap som vil kalle ' addTableRow() '-funksjon i en skriptfil, for å legge til og vise dataene i en tabell:
Her, i HTML-filen, skriv disse kodelinjene for å lage en tabellstruktur, hvor data legges til dynamisk:
< div >
< h4 > Ansatt rekord b > h4 >
< senter >
< tabell-ID = 'tabelldata' grense = '1' cellefylling = 'to' >
< tr >
< td >< b > Navn b > td >
< td >< b > Kjønn b > td >
< td >< b > Betegnelse b > td >
< td >< b > Tilmeldingsdato b > td >
tr >
bord >
senter >
div >
I koden ovenfor:
- Lag en tabell med id ' tabellData ” som vil bli brukt i skriptfilen for å få referansen til denne tabellen og deretter legge til dataene til den.
- Tabellen inneholder fire kolonner, ' Navn ', ' Kjønn ', ' Betegnelse ', og ' Tilmeldingsdato ” som vil lagre data i henhold til kolonnenavn.
Å kjøre HTML-filen vil resultere i følgende nettleserutgang:
La oss legge til funksjonalitet for å lage tabeller dynamisk ved hjelp av JavaScript. I skriptfilen eller taggen bruker du koden nedenfor som vil opprette en tabell dynamisk:
funksjon addTableRow ( ) {var Navn = dokument. getElementById ( 'Navn' ) ;
var kjønn = dokument. getElementById ( 'kjønn' ) ;
var betegnelse = dokument. getElementById ( 'betegnelse' ) ;
var Dato = dokument. getElementById ( 'Dato' ) ;
var bord = dokument. getElementById ( 'tabelldata' ) ;
var rowCount = bord. rader . lengde ;
var rad = bord. sett inn Rad ( rowCount ) ;
rad. sett innCell ( 0 ) . indreHTML = Navn. verdi ;
rad. sett innCell ( 1 ) . indreHTML = kjønn. verdi ;
rad. sett innCell ( to ) . indreHTML = betegnelse. verdi ;
rad. sett innCell ( 3 ) . indreHTML = Dato. verdi ;
}
I utdraget ovenfor:
- Først, definer en funksjon ' addTableRow() ” som vil utløse klikkhendelsen til HTML-knappen.
- Få deretter referansen til alle inndatafeltene ett etter ett ved å bruke deres respektive tildelte IDer ved å bruke ' getelementById() ”-metoden og lagre dem i variabler.
- Disse variablene vil bli brukt for å få verdien av inndatafeltene ved å bruke HTML ' verdi '-egenskapen og sett dem i de individuelle cellene i tabellen ved å bruke ' indreHTML ' eiendom.
- Legg til rader i en tabell ved å bruke ' tabell.rader.lengde ” eiendom og deretter lagre verdier i den.
Produksjon
Utdataene ovenfor indikerer at den dynamiske tabellen er opprettet ved å legge til data i et skjema ved hjelp av JavaScript.
Konklusjon
Den dynamiske tabellen lages ved å bruke de forskjellige HTML-egenskapene med forhåndsdefinerte JavaScript-metoder. Lag først et skjema i en HTML-fil og få deretter referansen til feltene ved å bruke forhåndsdefinerte JavaScript-metoder som ' getElementById() '-metoden og deretter hente inn de angitte verdiene ved å bruke ' verdi ' eiendom. Angi disse verdiene i en tabells respektive kolonner ved å bruke ' indreHTML ' eiendom. Dette blogginnlegget demonstrerer prosessen for å lage en dynamisk tabell i JavaScript.