In this article i am going to show you How to create a table dynamically using JavaScript
Consider you have following 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
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
