Hvordan lage tabell dynamisk i JavaScript

En dynamisk tabell er en tabell som endrer antall rader avhengig av inngangen mottatt ved kjøretid. Noen nettsteder eller online applikasjoner, for eksempel forretningsnettsteder, må lage en tabell dynamisk mens du legger til noen data eller informasjon. Det kan gjøres ved hjelp av JavaScript, da JavaScript er et skriptspråk som bruker dynamisk typing.

Dette blogginnlegget vil demonstrere prosessen for å lage en dynamisk tabell i JavaScript.

Hvordan lage et bord 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 viser det deretter i en tabell ved å legge det dynamisk til:

Fyll ut skjemaet nedenfor:

Navn:



Kjønn:



Betegnelse:



Sammenføyningsdato:



Legg til data i tabellen

I ovennevnte kodebit:

• Først må du lage en overskrift "Fyll ut skjemaet nedenfor:”.
• Lag inngangsfelt for “Navn”,“Kjønn”,“Betegnelse”, Og“Joiningdate”Med tildelte ID -er“Navn”,“kjønn”,“betegnelse”, Og“Dato”Henholdsvis å ta inngangsverdiene fra brukeren.
• Disse IDene brukes til å få referanse til elementene i JavaScript.
• Opprett deretter en knapp med "ved trykk”Eiendom som vil kalle“addTablerow ()”Funksjon i en skriptfil, for å legge til og vise dataene i en tabell:

Her, i HTML -filen, skriver du disse kodelinjene for å opprette en tabellstruktur, der data vil bli lagt til dynamisk:

Ansattes rekord

Navn

Kjønn

Betegnelse

Sammenføyningsdato

I koden ovenfor:

• Lag en tabell med ID “Tabledata”Det 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“Sammenføyningsdato”Det 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 tabell = dokument.getElementById ("Tabledata");
var rowcount = tabell.rader.lengde;
var rad = tabell.Insertrow (RowCount);
rad.Insertcell (0).INNERHTML = Navn.verdi;
rad.Insertcell (1).INNERHTML = kjønn.verdi;
rad.Insertcell (2).InnerHTML = Betegnelse.verdi;
rad.Insertcell (3).InnerHTML = Dato.verdi;

I ovennevnte utdrag:

• Først definer en funksjon "addTablerow ()”Som vil utløse klikkhendelsen til HTML -knappen.
• Få deretter referansen til alle inngangsfelt ett etter en ved å bruke sine respektive tildelte ID -er ved å bruke "getElementById ()”Metode og lagre dem i variabler.
• Disse variablene vil bli brukt for å få verdien av inngangsfeltene ved å bruke HTML “verdi”Eiendom og sett dem i de enkelte celler i tabellen ved å bruke“indrehtml”Eiendom.
• Legg til rader i et bord ved å bruke "bord.rader.lengde”Eiendom og lagre verdier i den.

Produksjon

Ovennevnte utgang indikerer at den dynamiske tabellen er opprettet med suksess ved å legge til data i en form ved hjelp av JavaScript.

Konklusjon

Den dynamiske tabellen opprettes ved hjelp av de forskjellige HTML -egenskapene med JavaScript forhåndsdefinerte metoder. Først må du lage et skjema i en HTML -fil og deretter få referansen til feltene ved å bruke JavaScript forhåndsdefinerte metoder som "getElementById ()”Metode og hente deretter 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.