How To Create Html Table Dynamically In C#

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: