Denne manual vil bruge JavaScript til at forklare proceduren for tilføjelse af en række til en tabel.
Sådan tilføjes række til HTML-tabel ved hjælp af JavaScript?
Brug følgende procedurer for at tilføje en række i en tabel:
Lad os kontrollere hver procedure individuelt.
Metode 1: Tilføj række til HTML-tabel ved hjælp af insertRow()-metoden
Det ' insertRow() ”-metoden bruges til at tilføje en ny række i begyndelsen af tabellen. Det opretter et nyt
Hvis du har til hensigt at tilføje rækken til sidst/slutningen af tabellen, så send indekset ' -1 ” som argument.
Syntaks
Brug følgende syntaks til at tilføje rækker i en tabel ved hjælp af insertRow() metoden:
bord. indsæt Række ( indeks ) ;
Her, ' indeks ” angiver den position, hvor du vil tilføje en ny række, f.eks. i slutningen af tabellen eller i starten.
Eksempel 1: Tilføjelse af en række i toppen/starten af tabellen
Her vil vi oprette en tabel og en knap i en HTML-fil ved hjælp af HTML
< tr >
< td > Celle af række 1 td >
< td > Celle af række 1 td >
< td > Celle af række 1 td >
tr >
< tr >
< td > Celle af række to td >
< td > Celle af række to td >
< td > Celle af række to td >
tr >
< tr >
< td > Celle af række 3 td >
< td > Celle af række 3 td >
< td > Celle af række 3 td >
tr >
bord >
< br >
Opret derefter en knap, som vil kalde ' addRow() ”-knappen, når der klikkes på:
< knaptype = 'knap' onclick = 'addRow()' > Klik for at tilføje række øverst i tabellen knap >For at style bordet, vil vi indstille grænsen for hver celle og tabellen som angivet nedenfor:
bord, td {grænse : 1px ensfarvet sort ;
}
Nu vil vi tilføje rækker i tabellen øverst/starten af tabellen ved hjælp af JavaScript. For at gøre det skal du definere en funktion med navnet ' addRow() ”, der vil blive kaldt på knappens onclick()-begivenhed. Hent derefter den oprettede tabel ved hjælp af ' getElementById() ” metode. Ring derefter til ' insertRow() ' metode ved at videregive ' 0 ” indeks som en parameter, der angiver, at rækken vil blive tilføjet i starten af tabellen.
Påkald derefter ' insertCell() ” metode ved at sende indekser, der viser hvor mange celler der vil blive tilføjet til rækken. Tilføj endelig tekstdata eller tekst i celler ved hjælp af ' indreHTML ” ejendom:
functionaddRow ( ) {var tableRow = dokument. getElementById ( 'bord' ) ;
var række = tabelrække. indsæt Række ( 0 ) ;
hvor celle1 = række. indsæt celle ( 0 ) ;
hvor celle2 = række. indsæt celle ( 1 ) ;
hvor celle3 = række. indsæt celle ( to ) ;
cell1. indreHTML = 'Cell of New Row' ;
celle 2. indreHTML = 'Cell of New Row' ;
celle 3. indreHTML = 'Cell of New Row' ;
}
Som du kan se i outputtet, tilføjes den nye række øverst i den eksisterende tabel ved at klikke på knappen:
Eksempel 2: Tilføjelse af en række i slutningen af tabellen
Hvis du vil indsætte en række i den sidste/ende af tabellen, skal du sende ' -1 ' indeks til ' insertRow() ” metode. Den tilføjer til sidst rækken, når der klikkes på knappen:
functionaddRow ( ) {var tableRow = dokument. getElementById ( 'bord' ) ;
var række = tabelrække. indsæt Række ( - 1 ) ;
hvor celle1 = række. indsæt celle ( 0 ) ;
hvor celle2 = række. indsæt celle ( 1 ) ;
hvor celle3 = række. indsæt celle ( to ) ;
cell1. indreHTML = 'Cell of New Row' ;
celle 2. indreHTML = 'Cell of New Row' ;
celle 3. indreHTML = 'Cell of New Row' ;
}
Produktion
Lad os gå til den anden metode!
Metode 2: Tilføj række til HTML-tabel ved at oprette nyt element
Der er en anden metode til at tilføje en række i en tabel, der skaber nye elementer ved hjælp af JavaScript-metoder, inklusive ' createElement() ”-metoden og ” appendChild() ” metode. createElement() opretter
Syntaks
Følg den angivne syntaks for at oprette et nyt element til tilføjelse af en række i en tabel ved hjælp af JavaScript:
dokument. skabeElement ( 'tr' ) ;Her er ' tr ” er tabelrækken.
Eksempel
Vi vil nu bruge den samme tidligere oprettede tabel i HTML med en CSS-fil, men i JavaScript-filen vil vi bruge ' createElement() ” metode. Tilføj derefter data eller tekst i cellerne ved hjælp af ' indreHTML ” ejendom. Til sidst påberåber du ' appendChild() ” metode, der tilføjer cellerne i en række og derefter rækken i en tabel:
functionaddRow ( ) {var tableRow = dokument. getElementById ( 'bord' ) ;
var række = dokument. skabeElement ( 'tr' ) ;
hvor celle1 = dokument. skabeElement ( 'td' ) ;
hvor celle2 = dokument. skabeElement ( 'td' ) ;
hvor celle3 = dokument. skabeElement ( 'td' ) ;
cell1. indreHTML = 'Cell of New Row' ;
celle 2. indreHTML = 'Cell of New Row' ;
celle 3. indreHTML = 'Cell of New Row' ;
række. vedhæfteBarn ( cell1 ) ;
række. vedhæfteBarn ( celle 2 ) ;
række. vedhæfteBarn ( celle 3 ) ;
tabelrække. vedhæfteBarn ( række ) ;
}
Outputtet viser, at den nye række er blevet tilføjet i slutningen af tabellen:
Vi har samlet alle metoderne til at tilføje en række i en tabel ved hjælp af JavaScript.
Konklusion
For at tilføje en række i en tabel skal du bruge de to metoder: insertRow()-metoden eller oprette et nyt element ved hjælp af foruddefinerede JavaScript-metoder, inklusive appendChild()-metoden og createElement()-metoden. Du kan tilføje en række i starten af slutningen af tabellen ved at bruge insertRow() metoden ved at sende indekser. Denne manual forklarede procedurerne for at tilføje en ny række i en tabel ved at klikke på en knap ved hjælp af JavaScript.