Tabelas dinâmicas

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.

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.

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