How to create a dynamic table in HTML using JavaScript

Creating a dynamic HTML table is one of the most common tasks for web developers. Not only are tables used to display data, but they can also be used as interfaces. In this blog post, I will walk you through how to create a dynamic table in HTML using JavaScript.

We are also going to add some rows dynamically to our newly generated table created using JavaScript. So, let’s check the code step by step.

CONTENTS

Create an HTML table using JavaScript

In order to create a table, I am going to use a pure JavaScript function i.e. document.createElement(). Let’s check the code first.

var userTable = document.createElement('table');
userTable.setAttribute('id', 'userTable');
document.body.appendChild(userTable);

First, create a table var userTable = document.createElement('table');
Give an id to our dynamically created table userTable.setAttribute('id', 'userTable');
Add the table to <body> element using .appenChild() method i.e. document.body.appendChild(userTable);.

Add Table Header

In our previous steps, we have successfully created a user table. Now we need to add a Table Header. To do that, follow the code below.

var tableHeadRow = userTable.insertRow(0);

var tableHeadArray = new Array();
tableHeadArray = ['User Name', 'Address', 'Age', 'Option'];

for (var i = 0; i < tableHeadArray.length; i++) {
	
	var th = document.createElement('th');
	th.innerHTML = tableHeadArray[i];
	tableHeadRow.appendChild(th);
}

By using .insertRow() method, we have to add a row to our userTable.
Now store the all column name into an array.
Loop through the tableHeadArray to get each element.
Now create <th> element by using document.createElement('th'); method.
Store each array element value into a dynamically generated <th> tag.
Append each column into tableHeadRow i.e. tableHeadRow.appendChild(th);

Add Some Style to Table

We have already created a table as well as a table header. Now add some style to it. As we have set our table id i.e. userTable, we can add style using CSS for example #userTable{ your style here } or we can add using .setAttribute() method.

//add border
userTable.setAttribute('border', '1');

//add cell padding
userTable.setAttribute('cellpadding', '10px');

How to add multiple rows dynamically in a table using javascript

We have created a simple dynamic table. Now we are going to add multiple rows dynamically based on user input.

In order to add a row, we need three text boxes and a button. Let’s create it first.

Username: <input type="text" id="username"><br/><br/>
Address: <input type="text" id="address"><br/><br/>
Age: <input type="number" id="age"><br/><br/>
<button id="addRow">Add Row</button><br/><br/>

I have written here a simple HTML code for example purposes. You can add your own style as per your requirement. Now add the following code to add a row.

//add row dynamically
document.getElementById("addRow").addEventListener("click", function(){
	
	const username = document.getElementById("username");
	const address = document.getElementById("address");
	const age = document.getElementById("age");
	
	
	var tr = userTable.insertRow(-1);
	

	var tableDataArray = new Array();
	tableDataArray = [username.value, address.value, age.value];
	
	for (var i = 0; i < tableDataArray.length; i++) {
		
		var td = tr.insertCell(-1);
		td.innerHTML = tableDataArray[i];
	}
	
	var td = tr.insertCell(-1);
	
	// add a button
	var button = document.createElement('button');

	// set button attributes.
	button.setAttribute('type', 'button');
	button.innerHTML = 'Remove';

	// set onclick event.
	button.setAttribute('onclick', 'remRow(this)');

	td.appendChild(button);
	
	
	
	
	username.value = "";
	address.value = "";
	age.value = "";

});

First store all textboxes into different const i.e. username, address, age.
Add a row using .insertRow(-1) method. Here -1 is used to append the row to the table. If you use 0, it will prepend the row into the table.
Using insertCell(-1) the method, add the cell data.
Create a button element at the end of the row and add a function remRow(this) to it.

Remove dynamically added rows from a table

Sometimes, we need to remove some rows from a table. That’s why we have already set a remove button and also add a function to it. Let’s check the remRow() function.

//remove row
function remRow(el) {
	var uTable = document.getElementById('userTable');
	uTable.deleteRow(el.parentNode.parentNode.rowIndex); 
}

Conclusion:

In this blog post, I have walked you through how to create a dynamic table in HTML using JavaScript. If you’ve been looking for an easy way to display data or create interfaces with tables on your website, hopefully, the tips and tricks we covered will help you out! Thank you so much for reading this article. We hope that it was helpful!