In deze handleiding wordt JavaScript gebruikt om de procedure voor het toevoegen van een rij aan een tabel uit te leggen.
Hoe rij toevoegen aan HTML-tabel met JavaScript?
Gebruik de volgende procedures om een rij aan een tabel toe te voegen:
Laten we elke procedure afzonderlijk bekijken.
Methode 1: Rij toevoegen aan HTML-tabel met de methode insertRow()
De ' invoegenRij() ” methode wordt gebruikt om een nieuwe rij aan het begin van de tabel toe te voegen. Het maakt een nieuw
Als u van plan bent om de rij aan het einde/einde van de tabel toe te voegen, geef dan index ' -1 ’ als argument.
Syntaxis
Gebruik de volgende syntaxis voor het toevoegen van rijen in een tabel met behulp van de insertRow()-methode:
tafel. invoegenRij ( inhoudsopgave ) ;
Hier, ' inhoudsopgave ” geeft de positie aan waar u een nieuwe rij wilt toevoegen, zoals aan het einde van de tabel of aan het begin.
Voorbeeld 1: Een rij bovenaan/begin van de tabel toevoegen
Hier zullen we een tabel en een knop in een HTML-bestand maken met behulp van de HTML
< tr >
< td > cel van rij 1 td >
< td > cel van rij 1 td >
< td > cel van rij 1 td >
tr >
< tr >
< td > cel van rij twee td >
< td > cel van rij twee td >
< td > cel van rij twee td >
tr >
< tr >
< td > cel van rij 3 td >
< td > cel van rij 3 td >
< td > cel van rij 3 td >
tr >
tafel >
< br >
Maak vervolgens een knop die de ' Voeg een rij toe() ” knop wanneer erop wordt geklikt:
< type knop = 'knop' bij klikken = 'Voeg een rij toe()' > Klik om een rij toe te voegen bovenaan de tabel knop >Voor het opmaken van de tabel stellen we de rand van elke cel en de tabel in zoals hieronder weergegeven:
tafel, td {grens : 1px effen zwart ;
}
Nu zullen we rijen in de tabel bovenaan/begin van de tabel toevoegen met behulp van JavaScript. Om dit te doen, definieert u een functie met de naam ' Voeg een rij toe() ” dat wordt aangeroepen bij de onclick() -gebeurtenis van de knop. Haal vervolgens de gemaakte tabel op met de ' getElementById() ” methode. Bel daarna de “ invoegenRij() ”-methode door de “ 0 ” index als een parameter die aangeeft dat de rij aan het begin van de tabel wordt toegevoegd.
Roep vervolgens de ' insertCell() ” door indexen door te geven die laten zien hoeveel cellen aan de rij worden toegevoegd. Voeg ten slotte de tekstgegevens of tekst in cellen toe met ' innerlijkeHTML ' eigendom:
functionaddRow ( ) {var tabelRij = document. getElementById ( 'tafel' ) ;
was rij = tafel rij. invoegenRij ( 0 ) ;
waar cel1 = rij. insertCell ( 0 ) ;
waar cel2 = rij. insertCell ( 1 ) ;
waar cel3 = rij. insertCell ( twee ) ;
cel1. innerlijkeHTML = 'Cel van nieuwe rij' ;
cel2. innerlijkeHTML = 'Cel van nieuwe rij' ;
cel3. innerlijkeHTML = 'Cel van nieuwe rij' ;
}
Zoals u in de uitvoer kunt zien, wordt de nieuwe rij bovenaan de bestaande tabel toegevoegd door op de knop te klikken:
Voorbeeld 2: Een rij toevoegen aan het einde van de tabel
Als u een rij aan het einde/einde van de tabel wilt invoegen, geeft u de ' -1 ” index naar de “ invoegenRij() ” methode. Het zal de rij eindelijk toevoegen wanneer op de knop wordt geklikt:
functionaddRow ( ) {var tabelRij = document. getElementById ( 'tafel' ) ;
was rij = tafel rij. invoegenRij ( - 1 ) ;
waar cel1 = rij. insertCell ( 0 ) ;
waar cel2 = rij. insertCell ( 1 ) ;
waar cel3 = rij. insertCell ( twee ) ;
cel1. innerlijkeHTML = 'Cel van nieuwe rij' ;
cel2. innerlijkeHTML = 'Cel van nieuwe rij' ;
cel3. innerlijkeHTML = 'Cel van nieuwe rij' ;
}
Uitgang:
Laten we naar de andere methode gaan!
Methode 2: Rij toevoegen aan HTML-tabel door een nieuw element te maken
Er is een andere methode voor het toevoegen van een rij in een tabel die nieuwe elementen maakt met behulp van JavaScript-methoden, waaronder de ' createElement() ”-methode en de “ appendChild() ” methode. De createElement() maakt de elementen
Syntaxis
Volg de meegeleverde syntaxis om een nieuw element te maken voor het toevoegen van een rij in een tabel met JavaScript:
document. createElement ( 'tr' ) ;Hier de ' tr ” is de tabelrij.
Voorbeeld
We zullen nu dezelfde eerder gemaakte tabel in HTML gebruiken met een CSS-bestand, maar in het JavaScript-bestand zullen we de ' createElement() ” methode. Voeg vervolgens de gegevens of tekst in de cellen toe met behulp van de ' innerlijkeHTML ' eigendom. Roep tot slot de ' appendChild() ” methode die de cellen in een rij en vervolgens de rij in een tabel toevoegt:
functionaddRow ( ) {var tabelRij = document. getElementById ( 'tafel' ) ;
was rij = document. createElement ( 'tr' ) ;
waar cel1 = document. createElement ( 'td' ) ;
waar cel2 = document. createElement ( 'td' ) ;
waar cel3 = document. createElement ( 'td' ) ;
cel1. innerlijkeHTML = 'Cel van nieuwe rij' ;
cel2. innerlijkeHTML = 'Cel van nieuwe rij' ;
cel3. innerlijkeHTML = 'Cel van nieuwe rij' ;
rij. appendKind ( cel1 ) ;
rij. appendKind ( cel2 ) ;
rij. appendKind ( cel3 ) ;
tafel rij. appendKind ( rij ) ;
}
De uitvoer laat zien dat de nieuwe rij met succes is toegevoegd aan het einde van de tabel:
We hebben alle methoden voor het toevoegen van een rij in een tabel met JavaScript gecompileerd.
Conclusie
Gebruik de twee benaderingen om een rij aan een tabel toe te voegen: de methode insertRow() of maak een nieuw element met vooraf gedefinieerde JavaScript-methoden, waaronder de methode appendChild() en de methode createElement(). U kunt een rij aan het begin van het einde van de tabel toevoegen met de methode insertRow() door indexen door te geven. In deze handleiding worden de procedures uitgelegd voor het toevoegen van een nieuwe rij in een tabel door op een knop te klikken met JavaScript.