Método insertCell() da TableRow

Objeto TableRow DOM HTML

Definição e Uso

insertCell() O método insere a célula no meio da linha atual.

Dica:Use Método deleteCell() Exclua a célula atual da linha da tabela.

Veja também:

Manual de Referência HTML:Tag <tr> HTML

Exemplo

Exemplo 1

Insira uma nova célula com conteúdo no início da linha de tabela com id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "Nova célula";

Experimente pessoalmente

Mais exemplos estão disponíveis na parte inferior da página.

gramática

tablerowObject.insertCell()index)
Parâmetros Descrição
index

É obrigatório no Firefox e Opera, opcional no IE, Chrome e Safari.

Número (começando com 0), que especifica a posição da nova célula na linha atual.

O valor 0 fará com que a nova célula seja inserida na primeira posição. Também pode usar o valor -1, que fará com que a nova célula seja inserida na última posição.

Se este parâmetro for omitido, o insertCell() no IE será inserido na última posição, no Chrome e Safari na primeira posição.

Detalhes técnicos

Retorno:

Elemento de célula inserido.

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Mais exemplos

Exemplo 2

Insira uma nova célula com conteúdo no final da linha da tabela com id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "Nova célula";

Experimente pessoalmente

Exemplo 3

Insira uma nova célula com conteúdo no índice 2 da linha da tabela com id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "Nova célula";

Experimente pessoalmente

Exemplo 4

Insira uma nova célula no começo da primeira linha da tabela. O conjunto rows (.rows[0]) retorna o conjunto de todos os elementos <tr> da tabela com id "myTable".

O número [0] especifica o elemento a ser pesquisado, neste exemplo, é a primeira linha da tabela. Então usamos insertcell() para inserir uma nova célula no índice -1:

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "Nova célula";

Experimente pessoalmente

Exemplo 5

Remova a primeira célula da linha da tabela com id="myRow":

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

Experimente pessoalmente

Exemplo 6

Insira uma nova linha no começo da tabela.

O método insertRow() insere uma nova linha no índice especificado da tabela, neste exemplo, na primeira posição (começo) da tabela com id="myTable".

Então usamos o método insertCell() para adicionar uma célula na nova linha.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NOVA CELULA1";
cell2.innerHTML = "NOVA CELULA2";

Experimente pessoalmente

Objeto TableRow DOM HTML