Come aggiungere una riga alla tabella HTML utilizzando JavaScript

A volte, durante lo sviluppo di un sito Web, può essere necessario creare o rimuovere righe e celle o aggiungere dati in una tabella in modo dinamico utilizzando JavaScript. JavaScript è un linguaggio dinamico che aiuta a controllare dinamicamente, ottenere l'accesso e modificare i componenti HTML sul lato client. Più specificamente, può essere utilizzato per aggiungere una riga a una tabella HTML.

Questo manuale utilizzerà JavaScript per spiegare la procedura per aggiungere una riga a una tabella.

Come aggiungere una riga alla tabella HTML utilizzando JavaScript?

Per aggiungere una riga in una tabella, utilizzare le procedure seguenti:

metodo insertRow()
Crea un nuovo elemento

Controlliamo ogni procedura singolarmente.

Metodo 1: aggiungi riga alla tabella HTML utilizzando il metodo insertRow()

Il ' inserisciRiga() Il metodo ” viene utilizzato per aggiungere una nuova riga all'inizio della tabella. Crea un nuovo elemento e lo inserisce nella tabella. Prende un indice come parametro che definisce la posizione della tabella in cui verrà aggiunta una riga. Se ' 0 ” o nessun indice verrà passato in un metodo, questo metodo aggiunge la riga all'inizio della tabella.

Se intendi aggiungere la riga all'ultimo/alla fine della tabella, passa index ' -1 ” come argomento.

Sintassi

Utilizzare la seguente sintassi per aggiungere righe in una tabella con l'aiuto del metodo insertRow():

tavolo. inserisciRiga ( indice ) ;

Qui, ' indice ” indica la posizione in cui si desidera aggiungere una nuova riga, ad esempio alla fine della tabella o all'inizio.

Esempio 1: aggiunta di una riga all'inizio/inizio della tabella

Qui creeremo una tabella e un pulsante in un file HTML usando l'HTML e tag. La tabella contiene tre righe e tre colonne o celle:

< id tabella = 'tavolo' >

< tr >

< td > Cella di fila 1 td >

< td > Cella di fila 1 td >

< td > Cella di fila 1 td >

tr >

< tr >

< td > Cella di fila Due td >

< td > Cella di fila Due td >

< td > Cella di fila Due td >

tr >

< tr >

< td > Cella di fila 3 td >

< td > Cella di fila 3 td >

< td > Cella di fila 3 td >

tr >

tavolo >

< fr >

Quindi, crea un pulsante che invocherà il ' Aggiungi riga() ” quando si fa clic:

< tipo di pulsante = 'pulsante' al clic = 'Aggiungi riga()' > Fare clic per aggiungere una riga nella parte superiore della tabella pulsante >

Per lo stile della tabella, imposteremo il bordo di ogni cella e la tabella come indicato di seguito:

tavola, td {

confine : 1px nero pieno ;

}

Ora aggiungeremo righe nella tabella nella parte superiore/inizio della tabella usando JavaScript. Per fare ciò, definire una funzione denominata ' Aggiungi riga() ” che verrà chiamato all'evento onclick() del pulsante. Quindi, recupera la tabella creata utilizzando ' getElementById() ' metodo. Successivamente, chiama il ' inserisciRiga() ” passando il “ 0 ” index come parametro che indica che la riga verrà aggiunta all'inizio della tabella.

Quindi, invoca il ' inserisciCella() ” passando gli indici che mostrano quante celle verranno aggiunte alla riga. Infine, aggiungi i dati di testo o il testo nelle celle usando ' innerHTML ' proprietà:

funzioneaddRow ( ) {
var tableRow = documento. getElementById ( 'tavolo' ) ;
era fila = tableRow. inserisciRiga ( 0 ) ;
dove cella1 = riga. inserisciCell ( 0 ) ;
dove cella2 = riga. inserisciCell ( 1 ) ;
dove cella3 = riga. inserisciCell ( Due ) ;
cellula1. innerHTML = 'Cella di nuova fila' ;
cellula2. innerHTML = 'Cella di nuova fila' ;
cellula3. innerHTML = 'Cella di nuova fila' ;
}

Come puoi vedere nell'output, la nuova riga viene aggiunta in cima alla tabella esistente facendo clic sul pulsante:

Esempio 2: aggiunta di una riga alla fine della tabella

Se vuoi inserire una riga all'ultimo/alla fine della tabella, passa il ' -1 ” indice al “ inserisciRiga() ' metodo. Aggiungerà finalmente la riga quando si fa clic sul pulsante:

funzioneaddRow ( ) {
var tableRow = documento. getElementById ( 'tavolo' ) ;
era fila = tableRow. inserisciRiga ( - 1 ) ;
dove cella1 = riga. inserisciCell ( 0 ) ;
dove cella2 = riga. inserisciCell ( 1 ) ;
dove cella3 = riga. inserisciCell ( Due ) ;
cellula1. innerHTML = 'Cella di nuova fila' ;
cellula2. innerHTML = 'Cella di nuova fila' ;
cellula3. innerHTML = 'Cella di nuova fila' ;
}

Produzione

Passiamo all'altro metodo!

Metodo 2: aggiungi riga alla tabella HTML creando un nuovo elemento

C'è un altro metodo per aggiungere una riga in una tabella che sta creando nuovi elementi usando i metodi JavaScript, incluso il ' creaElemento() ” metodo e il “ appendChild() ' metodo. Il createElement() crea gli elementi e e il metodo appendChild() aggiunge le celle e le righe in una tabella.

Sintassi

Segui la sintassi fornita per creare un nuovo elemento per aggiungere una riga in una tabella utilizzando JavaScript:

documento. createElement ( 'tr' ) ;

Qui, il “ tr ” è la riga della tabella.

Esempio

Ora useremo la stessa tabella precedentemente creata in HTML con un file CSS, ma nel file JavaScript useremo il ' creaElemento() ' metodo. Quindi, aggiungi i dati o il testo nelle celle usando ' innerHTML ' proprietà. Infine, invoca il ' appendChild() ” metodo che aggiungerà le celle in una riga e quindi la riga in una tabella:

funzioneaddRow ( ) {
var tableRow = documento. getElementById ( 'tavolo' ) ;
era fila = documento. createElement ( 'tr' ) ;
dove cella1 = documento. createElement ( 'td' ) ;
dove cella2 = documento. createElement ( 'td' ) ;
dove cella3 = documento. createElement ( 'td' ) ;
cellula1. innerHTML = 'Cella di nuova fila' ;
cellula2. innerHTML = 'Cella di nuova fila' ;
cellula3. innerHTML = 'Cella di nuova fila' ;
riga. appendChild ( cellula1 ) ;
riga. appendChild ( cellula2 ) ;
riga. appendChild ( cellula3 ) ;
tableRow. appendChild ( riga ) ;
}

L'output mostra che la nuova riga è stata aggiunta correttamente alla fine della tabella:

Abbiamo compilato tutti i metodi per aggiungere una riga in una tabella usando JavaScript.

Conclusione

Per aggiungere una riga in una tabella, utilizzare i due approcci: il metodo insertRow() o creare un nuovo elemento utilizzando i metodi predefiniti di JavaScript, inclusi il metodo appendChild() e il metodo createElement(). Puoi aggiungere una riga all'inizio della fine della tabella usando il metodo insertRow() passando gli indici. Questo manuale ha spiegato le procedure per aggiungere una nuova riga in una tabella facendo clic su un pulsante utilizzando JavaScript.

Come aggiungere una riga alla tabella HTML utilizzando JavaScript