Dette blogindlæg vil demonstrere processen til at oprette en dynamisk tabel i JavaScript.
Hvordan opretter man en tabel dynamisk i JavaScript?
Lad os se et eksempel, der forklarer, hvordan en dynamisk tabel oprettes i JavaScript.
Eksempel
For at begynde skal du skrive følgende linjer i et nyt HTML-dokument for at oprette en formular, der tager data og derefter viser dem i en tabel ved at tilføje dem dynamisk:
< div id = 'min form' >
< h4 > Udfyld nedenstående formular : h4 >
< etiket > Navn : etiket >
< input type = 'tekst' id = 'navn' >< br >< br >
< etiket > Køn : etiket >
< input type = 'tekst' id = 'køn' >< br >< br >
< etiket > Betegnelse : etiket >
< input type = 'tekst' id = 'betegnelse' >< br >< br >
< etiket > Deltager Dato : etiket >
< input type = 'dato' id = 'dato' >< br >< br >
< knap-id = 'tilføje' værdi = 'Tilføje' > Tilføj data til tabel knap >
div >
I ovenstående kodestykke:
- Først skal du oprette en overskrift ' Udfyld nedenstående formular: ”.
- Opret inputfelter for ' Navn ', ' Køn ', ' Betegnelse ', og ' Tilmeldingsdato ' med tildelte id'er ' navn ', ' køn ', ' betegnelse ', og ' dato ” for at tage inputværdierne fra brugeren.
- Disse id'er bruges til at få referencen til elementerne i JavaScript.
- Opret derefter en knap med ' onclick ' ejendom, der vil kalde ' addTableRow() ”-funktion i en script-fil for at tilføje og vise dataene i en tabel:
Her, i HTML-filen, skriv disse linjer kode for at skabe en tabelstruktur, hvor data tilføjes dynamisk:
< div >
< h4 > Medarbejderrekord b > h4 >
< centrum >
< tabel-id = 'tabeldata' grænse = '1' cellepolstring = 'to' >
< tr >
< td >< b > Navn b > td >
< td >< b > Køn b > td >
< td >< b > Betegnelse b > td >
< td >< b > Tilmeldingsdato b > td >
tr >
bord >
centrum >
div >
I ovenstående kode:
- Opret en tabel med id'et ' tabeldata ”, der vil blive brugt i script-filen for at få referencen til denne tabel og derefter tilføje dataene til den.
- Tabellen indeholder fire kolonner, ' Navn ', ' Køn ', ' Betegnelse ', og ' Tilmeldingsdato ”, der gemmer data i henhold til kolonnenavne.
Kørsel af HTML-filen vil resultere i følgende browseroutput:
Lad os tilføje funktionalitet til at oprette tabeller dynamisk ved hjælp af JavaScript. I scriptfilen eller tagget skal du bruge nedenstående kode, der vil oprette en tabel dynamisk:
fungere addTableRow ( ) {var navn = dokument. getElementById ( 'navn' ) ;
var køn = dokument. getElementById ( 'køn' ) ;
var betegnelse = dokument. getElementById ( 'betegnelse' ) ;
var dato = dokument. getElementById ( 'dato' ) ;
var bord = dokument. getElementById ( 'tabeldata' ) ;
var rowCount = bord. rækker . længde ;
var række = bord. indsæt Række ( rowCount ) ;
række. indsæt celle ( 0 ) . indreHTML = navn. værdi ;
række. indsæt celle ( 1 ) . indreHTML = køn. værdi ;
række. indsæt celle ( to ) . indreHTML = betegnelse. værdi ;
række. indsæt celle ( 3 ) . indreHTML = dato. værdi ;
}
I ovenstående uddrag:
- Først skal du definere en funktion ' addTableRow() ”, der udløser klikhændelsen på HTML-knappen.
- Få derefter referencen for alle inputfelter et efter et ved hjælp af deres respektive tildelte id'er ved hjælp af ' getelementById() ”-metoden og gemme dem i variabler.
- Disse variabler vil blive brugt til at få værdien af inputfelterne ved hjælp af HTML ' værdi ' egenskab og indstil dem i de individuelle celler i tabellen ved hjælp af ' indreHTML ” ejendom.
- Tilføj rækker i en tabel ved hjælp af ' tabel.rækker.længde ” ejendom og derefter gemme værdier i den.
Produktion
Ovenstående output indikerer, at den dynamiske tabel er oprettet med succes ved at tilføje data i en formular ved hjælp af JavaScript.
Konklusion
Den dynamiske tabel oprettes ved hjælp af de forskellige HTML-egenskaber med foruddefinerede JavaScript-metoder. Først skal du oprette en formular i en HTML-fil og derefter få referencen til felterne ved hjælp af foruddefinerede JavaScript-metoder såsom ' getElementById() ”-metoden og derefter hente deres indtastede værdier ved hjælp af “ værdi ” ejendom. Indstil disse værdier i en tabels respektive kolonner ved hjælp af ' indreHTML ” ejendom. Dette blogindlæg demonstrerer processen til at oprette en dynamisk tabel i JavaScript.