egermano.com

Nesse artigo vou mostrar como manipular uma tabela com JavaScript usando as interfaces DOM (document object model).

Os ganhos de se criar e manipular uma tabela através do JS (JavaScript) é que toda a sua estrutura fica facilmente manipulada em DOM no formato de objeto. Você consegue manipular a tabela como um todo ou cada parte dela independente de outra.

Para criar a tabela você pode usar esses comandos, que são os mesmo para se criar qualquer outro elemento HTML no JS. Vou estruturar tudo em Orientação Objeto que é outro ganho na manipulação dos objetos e elementos da página. Vou usar também prototipação de objetos, que é outro artigo.

<script language=”javascript” type=”text/javascript”>
//Classe Tabela
function Tabela(linhas,colunas){
//Propriedades
this.linhas = linhas;
this.colunas = colunas;
//Nova estancia de um elemento HTML <TABLE></TABLE>
this.element = document.createElement(‘table’);
}
//Prototipacao da Classe Tabela
Tabela.prototype = {
//Metodo para montar a tabela
build:function(){
for(var l=0;l<this.linhas;l++){
//Nova linha <TR></TR>
var row = this.element.insertRow();
for(var c=0;c<this.colunas;c++){
//Nova Celula <TD></TD>
var cell = row.insertCell();
cell.appendChild(document.createTextNode(‘Linha : ‘ + parseInt(l+1) + ‘ Coluna: ‘ + parseInt(c+1)))
}
}
return this.element;
}
}
function Main(){
//instancio o Objeto
var tabela = new Tabela(5,5);
//contruo ele no div ‘content’
document.getElementById(‘content’).appendChild(tabela.build());
}
</script>

Essa é uma instanciação simples de uma tabela em JS.
Mais pro futuro vou colocar alguns métodos mostrando a manipulação de linhas e colunas de uma tabela com DOM.

Abraços,