Det här blogginlägget kommer att demonstrera processen för att skapa en dynamisk tabell i JavaScript.
Hur skapar man en tabell dynamiskt i JavaScript?
Låt oss se ett exempel som förklarar hur en dynamisk tabell kommer att skapas i JavaScript.
Exempel
Börja med att skriva följande rader i ett nytt HTML-dokument för att skapa ett formulär som tar data och sedan visar det i en tabell genom att lägga till det dynamiskt:
< div id = 'min form' >
< h4 > Fyll i formuläret nedan : h4 >
< märka > namn : märka >
< ingångstyp = 'text' id = 'namn' >< br >< br >
< märka > Kön : märka >
< ingångstyp = 'text' id = 'kön' >< br >< br >
< märka > Beteckning : märka >
< ingångstyp = 'text' id = 'beteckning' >< br >< br >
< märka > Sammanfogning Datum : märka >
< ingångstyp = 'datum' id = 'datum' >< br >< br >
< knapp-id = 'Lägg till' värde = 'Lägg till' > Lägg till data i tabellen knapp >
div >
I kodavsnittet ovan:
- Skapa först en rubrik ' Fyll i formuläret nedan: ”.
- Skapa inmatningsfält för ' namn ”, “ Kön ”, “ Beteckning ', och ' Inträdesdatum ' med tilldelade id ' namn ”, “ kön ”, “ beteckning ', och ' datum ” för att ta ingångsvärdena från användaren.
- Dessa ID används för att få referensen till elementen i JavaScript.
- Skapa sedan en knapp med ' onclick ' egendom som kommer att kalla ' addTableRow() ”-funktionen i en skriptfil, för att lägga till och visa data i en tabell:
Här, i HTML-filen, skriv dessa kodrader för att skapa en tabellstruktur, där data kommer att läggas till dynamiskt:
< div >
< h4 > Anställd Record b > h4 >
< Centrum >
< tabell-id = 'tabelldata' gräns = '1' cellstoppning = 'två' >
< tr >
< td >< b > namn b > td >
< td >< b > Kön b > td >
< td >< b > Beteckning b > td >
< td >< b > Inträdesdatum b > td >
tr >
tabell >
Centrum >
div >
I ovanstående kod:
- Skapa en tabell med id ' tabellData ” som kommer att användas i skriptfilen för att få referensen till denna tabell och sedan lägga till data till den.
- Tabellen innehåller fyra kolumner, ' namn ”, “ Kön ”, “ Beteckning ', och ' Inträdesdatum ” som kommer att lagra data enligt kolumnnamn.
Att köra HTML-filen kommer att resultera i följande webbläsarutdata:
Låt oss lägga till funktionalitet för att skapa tabeller dynamiskt med JavaScript. I skriptfilen eller taggen, använd nedanstående kod som kommer att skapa en tabell dynamiskt:
fungera addTableRow ( ) {var namn = dokumentera. getElementById ( 'namn' ) ;
var kön = dokumentera. getElementById ( 'kön' ) ;
var beteckning = dokumentera. getElementById ( 'beteckning' ) ;
var datum = dokumentera. getElementById ( 'datum' ) ;
var tabell = dokumentera. getElementById ( 'tabelldata' ) ;
var rowCount = tabell. rader . längd ;
var rad = tabell. infoga Rad ( rowCount ) ;
rad. infogaCell ( 0 ) . innerHTML = namn. värde ;
rad. infogaCell ( 1 ) . innerHTML = kön. värde ;
rad. infogaCell ( två ) . innerHTML = beteckning. värde ;
rad. infogaCell ( 3 ) . innerHTML = datum. värde ;
}
I utdraget ovan:
- Definiera först en funktion ' addTableRow() ” som kommer att utlösa klickhändelsen för HTML-knappen.
- Hämta sedan referensen för alla inmatningsfält ett efter ett med hjälp av deras respektive tilldelade ID med hjälp av ' getelementById() ”-metoden och lagra dem i variabler.
- Dessa variabler kommer att användas för att få värdet på inmatningsfälten med hjälp av HTML ' värde '-egenskapen och ställ in dem i de individuella cellerna i tabellen med hjälp av ' innerHTML ' fast egendom.
- Lägg till rader i en tabell med hjälp av ' tabell.rader.längd ” egendom och sedan lagra värden i den.
Produktion
Ovanstående utdata indikerar att den dynamiska tabellen har skapats framgångsrikt genom att lägga till data i ett formulär med JavaScript.
Slutsats
Den dynamiska tabellen skapas med hjälp av olika HTML-egenskaper med fördefinierade JavaScript-metoder. Skapa först ett formulär i en HTML-fil och hämta sedan referensen till fälten med fördefinierade JavaScript-metoder som ' getElementById() ”-metoden och hämta sedan deras angivna värden med hjälp av ” värde ' fast egendom. Ställ in dessa värden i en tabells respektive kolumner med hjälp av ' innerHTML ' fast egendom. Det här blogginlägget visar processen för att skapa en dynamisk tabell i JavaScript.