In this article i will show how handle a html table using the javascript and DOM manipulation.
The gains of creat and handle the html tabel using js is that all of the tabel structure it´s easy to handle throught DOM. You can change all the table or you can change each cell or row independently.
To build a html table I built these scripts to show:
//Table classfunctionTable(columns,rows){//Propertiesthis.columns=columns;this.rows=rows;//create the html node <TABLE></TABLE>this.element=document.createElement(‘table’);}//Prototype of Table ClassTable.prototype={//Method to build a tablebuild:function(){for(varl=0;l<this.rows;l++){//New row <TR></TR>varrow=this.element.insertRow();for(varc=0;c<this.columns;c++){//New cell<TD></TD>varcell=row.insertCell();cell.appendChild(document.createTextNode(‘Row:‘+parseInt(l+1)+‘Column:‘+parseInt(c+1)))}}returnthis.element;}}functionMain(){//Create a new tablevarnewTable=newTable(5,5);//get the element 'content' and put the new table insidedocument.getElementById(‘content’).appendChild(tabela.build());}
This is the simple and the easy way to build a html table using javascript.