Metodo insertCell() della TableRow

Oggetto DOM TableRow HTML

Definizione e uso

insertCell() Il metodo inserisce la cella nella riga corrente.

Suggerimento:Utilizza Metodo deleteCell() Elimina la cella corrente dalla riga del tavolo.

Vedi anche:

Manuale di riferimento HTML:Etichetta <tr> HTML

Esempio

Esempio 1

Inserisci una nuova cella contenente il testo all'inizio della riga del tavolo con id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

Prova personalmente

Più esempi sono disponibili nella parte inferiore della pagina.

grammatica

tablerowObject.insertCell()index)
Parametro Descrizione
index

Obbligatorio in Firefox e Opera, opzionale in IE, Chrome e Safari.

Numerico (iniziando da 0), specifica la posizione della nuova cella nella riga corrente.

Il valore 0 farà inserire la nuova cella alla prima posizione. Puoi anche usare il valore -1, che farà inserire la nuova cella all'ultima posizione.

Se questo parametro viene omesso, insertCell() in IE inserirà la nuova cella all'ultima posizione, in Chrome e Safari alla prima posizione.

Dettagli tecnici

Valore di ritorno:

Elemento della cella inserito.

Supporto dei browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Più esempi

Esempio 2

Inseriamo una nuova cella con contenuto alla fine della riga del tavolo con id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

Prova personalmente

Esempio 3

Inseriamo una nuova cella con contenuto all'indice 2 della riga del tavolo con id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

Prova personalmente

Esempio 4

Inseriamo una nuova cella all'inizio della prima riga della tabella. La raccolta rows (.rows[0]) restituisce la raccolta di tutti gli elementi <tr> della tabella con id "myTable".

Il numero [0] specifica l'elemento da cercare, in questo esempio, è la prima riga della tabella. Poi usiamo insertCell() per inserire una nuova cella all'indice -1:

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

Prova personalmente

Esempio 5

Eliminiamo la prima cella dalla riga della tabella con id="myRow":

var row = document.getElementById("myRow");
row.deleteCell(0);

Prova personalmente

Esempio 6

Inseriamo una nuova riga all'inizio della tabella.

Il metodo insertRow() inserisce una nuova riga all'indice specificato nella tabella, in questo esempio, alla prima posizione (inizio) della tabella con id="myTable".

Poiamo una cella nuova nella nuova riga utilizzando il metodo insertCell()

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "CELLA1 NUOVA";
cell2.innerHTML = "CELLA2 NUOVA";

Prova personalmente

Oggetto DOM TableRow HTML