How to create HTML Table dynamically in Java Script

Introduction:

In this article i will explain how to create a HTML Table dynamically in Java Script.

Description:

In previous articles i explained How to replace string in SQL Server, How to replace string in C#, How to replace string in Java Script, How many ways we can replace the string in Java Script, and How to work with TextBox in Java Script. Now i will explain how to create a HTML Table dynamically in Java Script.

This article includes the following:

Create table dynamically in Javascript.
Apply CSS for dynamically created table.

Add one HTML button with onclick event in form as shown below:

<div>
    <input type="button" value="Create Table" onclick="createTable()" />
</div>

Now add one div tag to append the dynamically created HTML Table.

<div id="divTable">
</div>

Now write createTable() function in java script as shown below:

<script type="text/javascript">
    function createTable() {
        // Create table.
        var table = document.createElement('table');
        // Insert New Row for table at index '0'.
        var row1 = table.insertRow(0);
        // Insert New Column for Row1 at index '0'.
        var row1col1 = row1.insertCell(0);
        row1col1.innerHTML = 'Col1';
        // Insert New Column for Row1 at index '1'.
        var row1col2 = row1.insertCell(1);
        row1col2.innerHTML = 'Col2';
        // Insert New Column for Row1 at index '2'.
        var row1col3 = row1.insertCell(2);
        row1col3.innerHTML = 'Col3';
        // Append Table into div.
        var div = document.getElementById('divTable');
        div.appendChild(table);
    }
</script>

Now run the page and click the 'Create Table' button, table is created with one row and three columns.

How to apply CSS:

Use setAttribute property for table element to apply class as shown below.

// Apply CSS for table
table.setAttribute('class', 'article');

Now article class is applied to table.

Full Source Code:

Demo.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs"
    Inherits="Demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Create Table Dynamically in Java Script</title>
    <style type="text/css">
        .article { width: 100%; background-color: #F9F9F9; font-family: Arial, "Bitstream Vera Sans" ,Helvetica,Verdana,sans-serif; color: #333; margin-top: 3px; }
        .article td, table.article th { border-top-color: white; border-bottom: 1px solid #DFDFDF; color: #555; }
        .article th { text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px; font-family: Arial, "Bitstream Vera Sans" ,Helvetica,Verdana,sans-serif; font-weight: bold; padding: 7px 7px 8px; text-align: left; line-height: 1.3em; font-size: 12px; background: #E3F2D4; border-right: 1px solid #DFDFDF; }
        .article td { font-size: 12px; padding: 7px 7px 8px; vertical-align: top; border-right: 1px solid #DFDFDF; }
    </style>
    <script type="text/javascript">
        function createTable() {
            // Create table.
            var table = document.createElement('table');
            // Apply CSS for table
            table.setAttribute('class', 'article');
            // Insert New Row for table at index '0'.
            var row1 = table.insertRow(0);
            // Insert New Column for Row1 at index '0'.
            var row1col1 = row1.insertCell(0);
            row1col1.innerHTML = 'Col1';
            // Insert New Column for Row1 at index '1'.
            var row1col2 = row1.insertCell(1);
            row1col2.innerHTML = 'Col2';
            // Insert New Column for Row1 at index '2'.
            var row1col3 = row1.insertCell(2);
            row1col3.innerHTML = 'Col3';
            // Append Table into div.
            var div = document.getElementById('divTable');
            div.appendChild(table);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="Create Table" onclick="createTable()" />
    </div>
    <div id="divTable">
    </div>
    </form>
</body>
</html>

Output: