Come aggiungere riga alla tabella HTML usando JavaScript

A volte, durante lo sviluppo di un sito Web, può esserci un requisito per 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 la modifica dei 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 riga alla tabella HTML usando JavaScript?

Per l'aggiunta di una riga in una tabella, utilizzare le seguenti procedure:

• Metodo insertrow ()
• Crea un nuovo elemento

Controlliamo ogni procedura individualmente.

Metodo 1: aggiungi la riga alla tabella HTML usando il metodo insertrow ()

IL "insertrow ()"Il metodo viene utilizzato per aggiungere una nuova riga all'inizio della tabella. Crea un nuovo elemento e lo inserisce nel tavolo. Prende un indice come parametro che definisce la posizione della tabella in cui verrà aggiunta una riga. Se "0"Oppure nessun indice verrà approvato in un metodo, questo metodo aggiunge la riga all'inizio della tabella.

Se si intende aggiungere la riga all'ultima/fine della tabella, quindi passa l'indice "-1"Come argomento.

Sintassi

Utilizzare la seguente sintassi per l'aggiunta di righe in una tabella con l'aiuto del metodo insertrow ():

tavolo.insertrow (indice);

Qui, "indice"Indica la posizione in cui si desidera aggiungere una nuova riga, come alla fine del tavolo o all'inizio.

Esempio 1: aggiunta di una riga in alto/inizio della tabella

Qui creeremo una tabella e un pulsante in un file HTML utilizzando HTML

E tag. La tabella contiene tre righe e tre colonne o celle:

Cella della riga 1	Cella della riga 1	Cella della riga 1
Cella della riga 2	Cella della riga 2	Cella della riga 2
Cella della riga 3	Cella della riga 3	Cella della riga 3

Quindi, crea un pulsante che invocerà il "Aggiungi riga()"Pulsante quando è stato cliccato:

Fare clic per aggiungere la riga nella parte superiore della tabella

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

Tabella, TD
bordo: 1px nero solido;

Ora aggiungeremo righe nella tabella in alto/inizio della tabella usando JavaScript. Per fare ciò, definire una funzione chiamata "Aggiungi riga()"Questo verrà chiamato sull'evento OnClick () del pulsante. Quindi, prendi la tabella creata usando "getElementById ()" metodo. Dopodiché, chiama il "insertrow ()Metodo "passando il"0"L'indice come parametro che indica che la riga verrà aggiunta all'inizio della tabella.

Quindi, invoca il "insertCell ()"Metodo passando indici che mostrano quante celle verranno aggiunte alla riga. Infine, aggiungi i dati di testo o il testo nelle celle usando "Innerhtml" proprietà:

functionAdDrow ()
var tableRow = documento.getElementById ("Tabella");
var row = tablerow.insertrow (0);
var cell1 = riga.insertCell (0);
var cell2 = riga.insertCell (1);
var cell3 = riga.insertCell (2);
Cell1.InnerHtml = "cell of New Row";
cell2.InnerHtml = "cell of New Row";
Cell3.InnerHtml = "cell of New Row";

Come puoi vedere nell'output, la nuova riga viene aggiunta nella parte superiore della tabella esistente facendo clic sul pulsante:

Esempio 2: aggiunta di una riga alla fine della tabella

Se si desidera inserire una riga all'ultima/fine del tavolo, passa il "-1"Indice al"insertrow ()" metodo. Aggiungerà finalmente la riga quando si fa clic sul pulsante:

functionAdDrow ()
var tableRow = documento.getElementById ("Tabella");
var row = tablerow.insertrow (-1);
var cell1 = riga.insertCell (0);
var cell2 = riga.insertCell (1);
var cell3 = riga.insertCell (2);
Cell1.InnerHtml = "cell of New Row";
cell2.InnerHtml = "cell of New Row";
Cell3.InnerHtml = "cell of New Row";

Produzione

Passiamo all'altro metodo!

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

Esiste un altro metodo per aggiungere una riga in una tabella che sta creando nuovi elementi usando i metodi JavaScript, tra cui "createElement ()Metodo e il "appendChild ()" metodo. Il createElement () crea il E Elements and the AppendChild () METOD Aggiunge le celle e le righe in una tabella.

Sintassi

Seguire la sintassi fornita per creare un nuovo elemento per aggiungere una riga in una tabella usando 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 "createElement ()" metodo. Quindi, aggiungi i dati o il testo nelle celle usando il "Innerhtml" proprietà. Infine, invoca il "appendChild ()"Metodo che aggiungerà le celle in una riga e quindi la riga in una tabella:

functionAdDrow ()
var tableRow = documento.getElementById ("Tabella");
var row = documento.createElement ("TR");
var cell1 = documento.createElement ("TD");
var cell2 = documento.createElement ("TD");
var cell3 = documento.createElement ("TD");
Cell1.InnerHtml = "cell of New Row";
cell2.InnerHtml = "cell of New Row";
Cell3.InnerHtml = "cell of New Row";
riga.AppendChild (cell1);
riga.AppendChild (cell2);
riga.AppendChild (cell3);
Tablerow.AppendChild (riga);

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

Abbiamo compilato tutti i metodi per l'aggiunta di una riga in una tabella usando JavaScript.

Conclusione

Per l'aggiunta di una riga in una tabella, utilizzare i due approcci: Insertrow () Metodo o creare un nuovo elemento usando i metodi predefiniti JavaScript, incluso il metodo AppendChild () e il metodo createElement (). È possibile aggiungere una riga all'inizio della fine della tabella usando il metodo insertrow () passando indici. Questo manuale ha spiegato le procedure per l'aggiunta di una nuova riga in una tabella facendo clic su un pulsante usando JavaScript.