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