In last post we discus about TABLEs in HTML that how to create a table apply CSS on it add border width height of it. Add rows in it. Add columns and colspan and rowspan and some other attributes like cellspacing and cellpadding etc.

But all the above are just HTML things now today we learn how to create a table using Java-Script which is also called HTML DOM objects.

  • How to create a table in Java-Script?
  • How to add rows in a table using Java-Script?
  • How to add cells in a row of a table in Java-Script?
  • How to delete rows of a table using Java-Script?
  • How to set or add attributes using Javascript?
  • How to write in cells using javascript?
  • How to access table element in javascript?

HTML DOM Table Object JavaScript

So first how to create a table? In Java-Script, we use createElement() method to create elements in a web page so same for a table we use document.createElement(“TABLE”); to create a table.

   var table= document.createElement(“TABLE”);

Now the second thing is to add or append that table in our html body so for this we use appendChild() function to append this table in some html element.



Add rows in table using Java-Script:

Now the second thing is how to add rows in that table so for this there are two methods one is same as we create table, create a row and append this to that table and second is using insertrow() method.

var row=document.createElement(“TR”);


or the other method wich is insertrow() that is like:

var row1 = table.insertRow(0);


Add cell in row of table using Java-script:

As like row there are also two methods to add cells in row or <tr> elements one is create element <tr> and append this in row and second one is insertcell() method.

var data_cell=document.createElement(“TD”);


And the other using insert cell method is like:

var data_cell = row.insertCell(0);


Delete rows of table using Java-Script:

To delete a row deleterow() method is used.



Add attributes using Java-script:

To add attribute in HTML object setAttribute() method is used which take two parameters first one is attribute name and second one is its value.



Write in table data cell using Java script:

To insert data in cells two methods are used one is write in there innerHTML and other one is using createTextNode() method and then append it in some table cell which is <td> or <th>.

var a=document.createTextNode(“hello”);


And the other method in which we write in the innerHTML is like:

var data_cell = table_row.insertCell(0);

data_cell.innerHTML = “New cell here”;

Access table element in java-script:

We can access table using it ID, class or tag name also.

Using ID: var x = document.getElementByID(“t1”);

Using Class: var x = document.getElementsByClassName(“t1”);

Using Tag: var x = document.getElementByTagName(“table”);

View Live Demo of Dynamic Table

Complete Code:


Leave a Reply

Your email address will not be published. Required fields are marked *