Create table dynamically using JavaScript

In this article i am going to show you How to create a table dynamically using JavaScript

Consider you have following html

<html>
 <body>
   <div id="table-container">
   
   </div>
 </body>
</html>

Now you can create table dynamically using following JavaScript

var table = document.createElement("table"); // creating table dynamically
var tableBody= document.createElement("tbody"); // creating table body dynamically
var row = document.createElement("tr"); // creating table row dynamically
var cell1 = document.createElement("td"); // creating table cell dynamically
cell1.innerHTML = "Name";

// append cell to row. (you can create any number of cells and then append to row)
row.appendChild(cell1);

// append row to table body
tableBody.appendChild(row);

// finally append table body to table
table.appendChild(tableBody);

So, by above JavaScript code we have created a table dynamically.

Now let's append the dynamically created table to div.

var container = document.getElementById("table-container");
container.appendChild(table);

We added dynamically created table to container.

In this way we can create a table dynamically using Javascript

Also check : Create table dynamically using JQuery

Dynamically add or delete rows to table using Javascript

In this article i am going to show you How to dynamically add or remove(delete) rows from table using Javascript

Consider you have following html

<html>
 <body>
   <div id="table-container">
       <table id="my-table">
       </table>
   </div>
 </body>
</html>

We already have a table with id = "my-table"

Now, let's see how to add rows dynamically using Javascript

first let's create rows

var row1 = table.insertRow(0);

Above command creates an empty <tr> element and adds it to the first position of the table

var row2 = table.insertRow(1);

Above command creates an empty <tr> element and adds it to the second position of the table

Now, let's create row cells

var cell1 = row1.insertCell(0);
cell1.innerHTML = "Name";

Above command creates an empty cell and adds it to first row of the table

var cell2 = document.createElement("td");
cell2.innerHTML = "Age";

Above command creates an empty cell and adds it to first row of the table.

Now we have a table with two rows and first row having two cells.

Remove rows dynamically using Javascript

document.getElementById("my-table").deleteRow(0);

Above command deletes first row from the table having id = "my-table"

In this way we can dynamically add or delete rows from table dynamically JavaScript

Also check - Create table dynamically using JQuery

Create table dynamically using JQuery

In this article i am going to show you How to create a table dynamically using JQuery

Consider you have following html

<html>
 <body>
   <div id="table-container">
   
   </div>
 </body>
</html>

Now you can create table dynamically using following JQuery

var table = $(document.createElement('table')); // creating table dynamically
var tableBody= $(document.createElement("tbody")); // creating table body dynamically
var row = $(document.createElement("tr")); // creating table row dynamically
var cell1 = $(document.createElement("td")); // creating table cell dynamically
cell1.html("Name");

// append cell to row. (you can create any number of cells and then append to row)
row.append(cell1);

// append row to table body
tableBody.append(row);

// finally append table body to table
table.append(tableBody);

So, by above JQuery code we have created a table dynamically.

Now let's append the dynamically created table to div.

var container = $("#table-container");
container.append(table);

We added dynamically created table to container.

In this way we can create a table dynamically using JQuery

C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

Pages