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:
-
CreatedMar 09, 2014
-
UpdatedOct 03, 2020
-
Views4,909