How to Create Table Dynamically in JavaScript
This article educates about how to create tables dynamically in JavaScript.
Create Table Dynamically in JavaScript
What does dynamically mean? Is JavaScript a dynamically typed language?
Yes, JavaScript is a dynamically typed language which means we don’t need to hard code everything but write the code executed at run time.
It is also important to keep in mind that we don’t get to know about errors at compile time while writing the code dynamically. It is because the dynamically written code runs during the program’s execution.
So, we need to be cautious about the code because we’ll know about errors (if any) at run time which may consume more time and effort.
For instance, we have a thousand lines of code that take time to get ready for execution. Once it was ready, we realized that there were errors in our code written dynamically.
JavaScript Code:
var table = document.createElement('table');
var tr = document.createElement('tr');
var array = ['ID', 'FirstName', 'LastName', 'Gender'];
for (var j = 0; j < array.length; j++) {
var th = document.createElement('th'); // column
var text = document.createTextNode(array[j]); // cell
th.appendChild(text);
tr.appendChild(th);
}
table.appendChild(tr);
for (var i = 0; i < array.length; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var text1 = document.createTextNode('Text1');
var text2 = document.createTextNode('Text2');
var text3 = document.createTextNode('Text3');
var text4 = document.createTextNode('Text4');
td1.appendChild(text1);
td2.appendChild(text2);
td3.appendChild(text3);
td4.appendChild(text4);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
}
document.body.appendChild(table);
Output:
In this snippet, we use createElement() to create the element node, it can be a <table>, <tr>, <th>, <td> or any other HTML element. As we are concerned with creating a table here, we’ll restrict the article with the tags related to the table.
After creating the HTML element, we need to add text to each element. For that, the createTextNode() is used.
Further, we use the appendChild() method to append the current node as the node’s last child. Let’s understand this whole process briefly.
- Create an HTML element.
- Create a text node.
- Append the current text node to the HTML element.
- Finally, append the HTML Element to the document.
You might think that a table can have the same data in the whole column? Yes, you are right.
A table does not contain redundant data. So, how to resolve it via coding dynamically?
We can make an array of objects with data populated in the table. See the following example.
JavaScript Code:
var table = document.createElement('table');
var tr = document.createElement('tr');
var arrheader = ['ID', 'FirstName', 'LastName', 'Gender'];
var array = [
{ID: 1, FirstName: 'Mehvish', LastName: 'Ashiq', Gender: 'Female'},
{ID: 2, FirstName: 'Thomas', LastName: 'Christoper', Gender: 'Male'},
{ID: 3, FirstName: 'Shiva', LastName: 'Pandy', Gender: 'Male'},
{ID: 4, FirstName: 'Tina', LastName: 'Robert', Gender: 'Female'}
];
for (var j = 0; j < array.length; j++) {
var th = document.createElement('th'); // column
var text = document.createTextNode(arrheader[j]); // cell
th.appendChild(text);
tr.appendChild(th);
}
table.appendChild(tr);
for (var i = 0; i < array.length; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var text1 = document.createTextNode(array[i].ID);
var text2 = document.createTextNode(array[i].FirstName);
var text3 = document.createTextNode(array[i].LastName);
var text4 = document.createTextNode(array[i].Gender);
td1.appendChild(text1);
td2.appendChild(text2);
td3.appendChild(text3);
td4.appendChild(text4);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
}
document.body.appendChild(table);
Output:
We can add the border to this table by writing table.setAttribute("border", "solid"); before document.body.appendChild(table);. Let’s practice it by using jQuery.
Create Table Dynamically in JavaScript Using jQuery
In jQuery, we create a table element as $('<table>'), you can replace it to create other elements (see the following example). The .text() adds content to HTML element while .css() beautifies the table by adding border for this particular example.
It takes two parameters, property name and its value. The append() method works the same as appendChild() appends the node as the last node of the element.
JavaScript Code:
var table = $('<table>');
var tr = $('<tr>');
var arrheader = ['ID', 'FirstName', 'LastName', 'Gender'];
var array = [
{ID: 1, FirstName: 'Mehvish', LastName: 'Ashiq', Gender: 'Female'},
{ID: 2, FirstName: 'Thomas', LastName: 'Christoper', Gender: 'Male'},
{ID: 3, FirstName: 'Shiva', LastName: 'Pandy', Gender: 'Male'},
{ID: 4, FirstName: 'Tina', LastName: 'Robert', Gender: 'Female'}
];
for (var j = 0; j < arrheader.length; j++) {
tr.append($('<th>').text(arrheader[j]));
}
table.append(tr);
for (var i = 0; i < array.length; i++) {
table.append($('<tr>').append(
$('<td>').text(array[i].ID), $('<td>').text(array[i].FirstName),
$('<td>').text(array[i].LastName), $('<td>').text(array[i].Gender)));
}
table.css('border', 'solid');
$('body').append(table);
Output:
Let’s add a border around every cell. See the following snippet.
JavaScript Code:
var table = $('<table>');
var tr = $('<tr>');
var arrheader = ['ID', 'FirstName', 'LastName', 'Gender'];
var array = [
{ID: 1, FirstName: 'Mehvish', LastName: 'Ashiq', Gender: 'Female'},
{ID: 2, FirstName: 'Thomas', LastName: 'Christoper', Gender: 'Male'},
{ID: 3, FirstName: 'Shiva', LastName: 'Pandy', Gender: 'Male'},
{ID: 4, FirstName: 'Tina', LastName: 'Robert', Gender: 'Female'}
];
for (var j = 0; j < arrheader.length; j++) {
tr.append($('<th>').text(arrheader[j]).css('border', 'solid'));
}
table.append(tr);
for (var i = 0; i < array.length; i++) {
table.append($('<tr>').append(
$('<td>').text(array[i].ID).css('border', 'solid'),
$('<td>').text(array[i].FirstName).css('border', 'solid'),
$('<td>').text(array[i].LastName).css('border', 'solid'),
$('<td>').text(array[i].Gender).css('border', 'solid')));
}
table.css('border', 'solid');
$('body').append(table);
Output:
