Table

O objeto Table representa uma tabela em HTML. Para cada tag <table> em um documento HTML, um objeto Table é criado pelo navegador Web. Como acontece no caso dos objetos que representam outras tags, esse objeto Table pode ser manipulado e alterado durante o acesso do usuário à página.

Com o uso de JavaScript é possível acessar o conteúdo de qualquer célula da tabela, sendo possível, inclusive, alterá-lo. Também é possível alterar a sua formatação: tamanho, bordas, espaçamentos etc. Além de tudo isso, é possível ainda acrescentar novas linhas e células a uma tabela já criada. Muita coisa pode ser feita em uma tabela através do uso de JavaScript, tudo vai depender do que for necessário à página. No quadro a seguir estão definidos os principais atributos do objeto Table.

• TableRow – Representa uma linha da tabela (tag <tr>);
• TableCell – Representa uma célula da tabela (tag <td>).

O exemplo mostrado a seguir demonstra a manipulação de tabelas em JavaScript. Nesse exemplo, o usuário deve digitar seu nome e CPF em dois campos textos e depois clicar no botão de inserir registro.

Ao fazer isso, uma nova linha na tabela é criada contendo duas células, cada uma com os valores digitados nos campos de texto. Como pode ser visto, a operação insertRow(), que é invocada no objeto Table (linha 13), cria um novo objeto do tipo TableRow (tag <tr>), adiciona-o após a posição definida e retorna-o. Nesse nosso exemplo, indicamos que a nova linha seja inserida após a última, ou seja, no índice igual à quantidade de linhas já existentes (length) do vetor rows do objeto Table. A nova linha é retornada e armazenada em uma variável chamada de novaLinha. Esse novo objeto é usado para criar duas células (linhas 16 e 17), através do método insertCell(). Por fim, o conteúdo da célula é modificado através do acesso aos seus atributos innerHTML (linhas 20 e 21).