Tabelas dinâmicas

Leave a reply

Criar tabelas dinamicamente com o Document Object Model, adicionando e removendo linhas e células, é extremamente fácil. Basicamente envolve a intercalação das funções createElement e appendChild.

Este artigo não seria possível sem a incrível documentação do Mozilla, especialmente “Traversing an HTML Table with JavaScript and DOM Interfaces“.

Abaixo segue um script para criar uma tabela com três linhas e três colunas por linha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function desenharTabela()
{
    var tabela = document.createElement('table');
 
    for (var i = 0; i < 3; i++) {
        var linha = document.createElement('tr');
 
        for (var j = 0; j < 3; j++) {
            var celula = document.createElement('td');
            var texto = document.createTextNode("Coluna " + j + ", Linha " + i);
 
            celula.appendChild(texto);
 
            linha.appendChild(celula);
        }
 
        tabela.appendChild(linha);
    }
 
    return tabela;
}

O ordem do appendChild() parece reversa. Mas pense da seguinte maneira, após ter seu elemento criado, “conecte” ele como filho de outro.

O HTML está no atributo innerHTML da variável tabela.

1
2

tabela = desenharTabela();
window.write(tabela.innerHTML);