Java Script: Create HTML Table dynamically

 Java Script     sbo     Updated on Mar 09, 2014     VIKRAM     2976   

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 ServerHow to replace string in C#How to replace string in Java ScriptHow 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:

  1. Create table dynamically in Java Script.
  2. 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:

 

  Related Articles
Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script
Standards for developing flexible, durable, and sustainable HTML
Java Script: Number Validation
Java Script: Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table
Java Script: TextBox
Java Script: Get Key Codes
SQL Server: Delete record from parent table when there is Foreign Key relation between parent and child tables
SQL Server: NOT NULL Constraint
SQL Server: Temporary Table
SQL Server: How to rename a column and How to rename a table
  Recent Articles
Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script
Standards for developing flexible, durable, and sustainable HTML
Java Script: Number Validation
Java Script: Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table
Java Script: TextBox
Java Script: Get Key Codes
SQL Server: Delete record from parent table when there is Foreign Key relation between parent and child tables
SQL Server: NOT NULL Constraint
SQL Server: Temporary Table
SQL Server: How to rename a column and How to rename a table