Hvordan legge til rad til HTML -tabell ved hjelp av JavaScript

Noen ganger, mens du utvikler et nettsted, kan det være et krav å opprette eller fjerne rader og celler eller legge til data i en tabell dynamisk ved hjelp av JavaScript. JavaScript er et dynamisk språk som hjelper med å kontrollere dynamisk, få tilgang til og endre HTML -komponenter på klientsiden. Mer spesifikt kan den brukes til å legge en rad til en HTML -tabell.

Denne håndboken vil bruke JavaScript for å forklare prosedyren for å legge en rad til et bord.

Hvordan legge til rad til HTML -tabell ved hjelp av JavaScript?

For å legge til en rad i en tabell, bruk følgende prosedyrer:

• Insertrow () -metode
• Lag et nytt element

La oss sjekke hver prosedyre individuelt.

Metode 1: Legg rad til HTML -tabell ved bruk av InSertrow () -metode

“Insertrow ()”Metoden brukes til å legge til en ny rad i begynnelsen av tabellen. Det skaper en ny element og setter det inn i tabellen. Det tar en indeks som en parameter som definerer plasseringen av tabellen der en rad vil bli lagt til. Hvis “0”Eller ingen indeks vil bli passert i en metode, denne metoden legger til raden i starten av tabellen.

Hvis du har tenkt å legge til raden i siste/enden av tabellen, må du passere indeksen "-1”Som et argument.

Syntaks

Bruk følgende syntaks for å legge til rader i en tabell ved hjelp av Insertrow () -metoden:

bord.Insertrow (indeks);

Her, “indeks”Indikerer posisjonen der du vil legge til en ny rad, for eksempel på slutten av bordet eller i starten.

Eksempel 1: Legge til en rad øverst/start av tabellen

Her oppretter vi en tabell og en knapp i en HTML -fil ved hjelp av HTML

og Tagger. Tabellen inneholder tre rader og tre kolonner eller celler:

Cell of Row 1	Cell of Row 1	Cell of Row 1
Cell of Row 2	Cell of Row 2	Cell of Row 2
Cell of Row 3	Cell of Row 3	Cell of Row 3

Opprett deretter en knapp som vil påkalle "addrow ()”-Knappen når du klikker:

Klikk for å legge til rad øverst på tabellen

For styling av bordet vil vi sette grensen til hver celle og tabellen som gitt nedenfor:

Tabell, TD
Grense: 1px solid svart;

Nå vil vi legge til rader i tabellen øverst/start av tabellen ved hjelp av JavaScript. For å gjøre det, definer en funksjon som heter “addrow ()”Det vil bli kalt på knappens OnClick () -arrangement. Deretter henter du det opprettede bordet ved hjelp av “getElementById ()”Metode. Etter det, ring "Insertrow ()”Metode ved å passere“0”Indeks som en parameter som indikerer at raden vil bli lagt til i starten av tabellen.

Deretter påkaller “Insertcell ()”Metode ved å passere indekser som viser hvor mange celler som vil bli lagt til raden. Til slutt, legg til tekstdata eller tekst i celler ved å bruke "indrehtml”Eiendom:

funksjonAddRow ()
var tablerow = dokument.getElementById ("tabell");
var rad = tablær.Insertrow (0);
var cell1 = rad.Insertcell (0);
var cell2 = rad.Insertcell (1);
var cell3 = rad.Insertcell (2);
Cell1.InnerHtml = "Cell of New Row";
Cell2.InnerHtml = "Cell of New Row";
Cell3.InnerHtml = "Cell of New Row";

Som du kan se i utdataene, blir den nye raden lagt til øverst på den eksisterende tabellen ved å klikke på knappen:

Eksempel 2: Legge til en rad på slutten av tabellen

Hvis du vil sette inn en rad i siste/enden av bordet, må du passere "-1”Indeks til“Insertrow ()”Metode. Den vil legge til raden til slutt når knappen er klikket:

funksjonAddRow ()
var tablerow = dokument.getElementById ("tabell");
var rad = tablær.Insertrow (-1);
var cell1 = rad.Insertcell (0);
var cell2 = rad.Insertcell (1);
var cell3 = rad.Insertcell (2);
Cell1.InnerHtml = "Cell of New Row";
Cell2.InnerHtml = "Cell of New Row";
Cell3.InnerHtml = "Cell of New Row";

Produksjon

La oss flytte til den andre metoden!

Metode 2: Legg rad til HTML -tabellen ved å lage nytt element

Det er en annen metode for å legge til en rad i en tabell som lager nye elementer ved hjelp av JavaScript -metoder, inkludert "CreateElement ()”Metode og“vedlegg ()”Metode. CreateElement () skaper og elementer og appendchild () -metoden legger cellene og radene i en tabell.

Syntaks

Følg den medfølgende syntaksen for å lage et nytt element for å legge til en rad i en tabell ved hjelp av JavaScript:

dokument.CreateElement ("TR");

Her, "tr”Er tabellraden.

Eksempel

Vi vil nå bruke den samme tidligere opprettet tabellen i HTML med en CSS -fil, men i JavaScript -filen vil vi bruke "CreateElement ()”Metode. Deretter legger du til dataene eller teksten i cellene ved å bruke "indrehtml”Eiendom. Til slutt, påkalle "vedlegg ()”Metode som vil legge til cellene på rad og deretter raden i en tabell:

funksjonAddRow ()
var tablerow = dokument.getElementById ("tabell");
var rad = dokument.CreateElement ("TR");
var cell1 = dokument.CreateElement ("TD");
var cell2 = dokument.CreateElement ("TD");
var cell3 = dokument.CreateElement ("TD");
Cell1.InnerHtml = "Cell of New Row";
Cell2.InnerHtml = "Cell of New Row";
Cell3.InnerHtml = "Cell of New Row";
rad.AppendChild (Cell1);
rad.appendchild (cell2);
rad.AppendChild (Cell3);
tabler.vedlegg (rad);

Utgangen viser at den nye raden blir lagt til på slutten av tabellen:

Vi har samlet alle metodene for å legge til en rad i en tabell ved hjelp av JavaScript.

Konklusjon

For å legge til en rad i en tabell, bruk de to tilnærmingene: Insertrow () -metoden eller lag et nytt element ved hjelp av JavaScript forhåndsdefinerte metoder, inkludert AppendChild () -metoden og CreateElement () -metoden. Du kan legge til en rad i starten av slutten av tabellen ved hjelp av Insertrow () -metoden ved å passere indekser. Denne håndboken forklarte prosedyrene for å legge til en ny rad i en tabell ved å klikke på en knapp ved hjelp av JavaScript.