How To Create dynamic table from Array in JavaScript

In this tutorial, we will create a dynamic table from Array using JavaScript. Along with that, we will be implementing the JavaScript snippet inside an HTML body.

So before we jump into the actual code itself, we must recall the definitions of HTML tags and elements and JavaScript Methods which we have discussed in the previous example.

Also, we have already learned the concepts of HTML and JavaScript in-depth in the previous HTML Tutorial and JavaScript Tutorial in detail.

HTML

<head> tag

This head tag is the place where the metadata(data about the stored data of the document) is stored. It is the first element in an HTML document.

<body> tag

This body tag is the place that is the core area of the HTML document.
It includes the content of the page.
It is used just once on an HTML page.

<h2> tag

This h2 tag is the heading of the HTML page. The value 2 specifies the degree of heading.
There can be multiple headings in one document of different degrees (from higher to lower). Eg: <h1>,<h2>,<h3>,<h4>, and so on.

<style> tag

This style tag is used to contain or link CSS styling of the HTML page using attributes such as media, type, and scoped.
It is usually placed inside the head element.

<table> tag

This table tag is used to form a structure of a table in an HTML document which can be further filled with data.

<tr> tag

This tr tag is used in HTML to hold the child inside it, i.e. data cells <td> and header cells <th>.

<th> tag

This th tag specifies the heading for a row or column in an HTML page.
The <th> tag is the child of <tr> elements.

JavaScript

The for Loop

The for loop is used to iterate a block of code multiple times as desired by the developer. We have already covered the for loop in detail in the JavaScript Flow Control Tutorial.

document.getElementById()

The document.getElementById() method in HTML DOM (Document Object Model), is the most common and easiest way of accessing the form elements in a HTML document.

insertRow() Method

The insertRow() method is used in an HTML page to generate empty <tr> elements and then they added to the table.

insertCell() Method

The insertCell() method is used in an HTML page to insert a particular cell inside a table.

innerHTML Property

The innerHTML property is a property in JavaScript that allows the script to manipulates an HTML page by reading and writing data within a HTML tag.

How to Create dynamic table from ArrayList with JavaScript?

Code:

<!doctype html>
<html>
<head>
    <title>Create dynamic table from ArrayList using JavaScript</title>
    <style>
       
      .input{
          border:none;
          font-size:10px;
      }
      .input:focus{
          outline:none;
      }
    </style>
 
</head>
<body>
    <h2 style="text-align:left">Create dynamic table from ArrayList using JavaScript</h2>
    
    <table id="fetch" border="2" cellspacing="1" cellpadding="8" class="table">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>

    <script type="text/javascript">
          var array =    [["X1","Y1","Z1"],
                         ["X2","Y2","Z2"],
                         ["X3","Y3","Z3"],
                         ["X4","Y4","Z4"],
                         ["X5","Y5","Z5"]],
                fetch = document.getElementById('fetch');

        for(var i=0; i <array.length; i++){
            var newRow = fetch.insertRow(fetch.length);
            for(var j=0; j<array[i].length; j++){
                var cell = newRow.insertCell(j);
                cell.innerHTML = array[i][j];
            }
        }

    </script>
</body>
</html>

Output:

Explanation:

The HTML Markup

In line 4, first we will write the HTML code for the title of the HTML page using <title> tag inside.
From 5 to 14, we styled the input cell border using <style> tag with attributes like border, outline, and font-size.
In line 18, we have used the <h2> tag for writing the heading Create dynamic table from ArrayList using JavaScript.
In <h2> tag, we have styled using the text-align:left to place the heading on the left side of the HTML page.
In line 20, we used the <table> tag to pass the ArrayList values later using the id=’fetch’ attribute.
Also, we styled the table using some attributes like border, cellspacing, and cellpadding.
In line 21, we have used <tr> tag to hold the children tags inside it and constitutes the body of the table.
In line 22, we have used <th> tag that creates the heading for the rows and columns of a table, i.e. A, B, and C.

The JavaScript Manipulation

In line 28, we have created an array that includes 15 elements, 3 in each row and 5 in each column.
In line 33, we assigned the document.getElementById() method using the ID ‘fetch’ to another variable fetch that will be used later in loop iteration.
In line 35, we will create a for loop for rows of the table.
In line 36, we will create a variable newRow and assign the fetch.insertRow() method with fetch.length as a parameter to it.
Inside the first for loop, between each iteration, the newRow will generate rows for row elements using ID ‘fetch’ of <table>.
In line 37, inside the first for loop, we will create another for loop for columns in each row.
In line 38, we create a variable cell and assign the insertCell() method to it.
Inside the column loop, between each iteration, the newRow.insertCell() will generate empty columns in each row.
In line 39, we use the innerHTML property to access the array[i][j] and read and write data and assign it to the corresponding empty rows and columns created above.

In the next tutorial, we will create a dynamic table using JavaScript and add new row, remove a row, and edit a row in a table. Along with that, we will be implementing the JavaScript snippet inside an HTML body.