Click here to Skip to main content
13,406,109 members (48,159 online)
Click here to Skip to main content
Add your own
alternative version


28 bookmarked
Posted 9 Jul 2007

Dynamic Table using html and javascript

, 17 Apr 2008
Rate this:
Please Sign up or sign in to vote.
The users can add new rows with values without using any databases


This article explains how to use html and javascript effectively. The contents of a html table can be added through the user inputs. It also explains how to debug the html pages with javascript using Visual


In the html file there are three input boxes with userid,username,department respectively.

These inputboxes are used to get the input from the user.

The user can add any number of inputs to the page.

When clicking the button the script will enable the debugger mode.

In javascript, to enable the debugger mode, we have to add the following tag in the javascript.


Then you have to set the debugging in the ie.

Tools->Internet Options-->Advanced-->uncheck
Disable script debugging(Internet Explorer)
Disable script debugging(Other)
<html xmlns="" >

<head runat="server">

<title>Dynamic Table</title>

<script language="javascript" type="text/javascript">

// <!CDATA[

function CmdAdd_onclick() {

var newTable,startTag,endTag;


//Creating a new table

startTag="<TABLE id='mainTable'><TBODY><TR><TD style=\"WIDTH: 120px\">User ID</TD>
<TD style=\"WIDTH: 120px\">User Name</TD><TD style=\"WIDTH: 120px\">Department</TD></TR>"



var trContents;

//Get the row contents








// Add previous rows







//Add the Latest row

newTable+="<TR><TD style=\"WIDTH: 120px\" >" +
    document.getElementById('userid').value +"</TD>";

newTable+="<TD style=\"WIDTH: 120px\" >" +
    document.getElementById('username').value +"</TD>";

newTable+="<TD style=\"WIDTH: 120px\" >" +
    document.getElementById('department').value +"</TD><TR>";


//Update the Previous Table With New Table.



// ]]>




<form id="form1" runat="server">


<br />


<input id="userid" type="text" /><br />


<input id="username" type="text" /><br />


<input id="department" type="text" />


<input id="CmdAdd" type="button" value="Add" onclick="return CmdAdd_onclick()" />


<div id="tableDiv" style="text-align:center" >

<table id="mainTable">

<tr style="width:120px " >

<td >User ID</td>

<td>User Name</td>








In the above code, we are assigning the div element into tableDiv.

In that div element, the table is in inside.

we can get it through div.innerHTML. we cannot change the OuterHtml.

So we can create a table and can be updated with the created table.

This new table will be displayed instead of that old table.

We can use this concept to create a editable Datagrid.

We have to set some id for each row when we delete a row and it is very useful to idetify

the particular row.


Adding a new row is like the same in this article.


For editing the row, You have to get the particular row and set that values in the textboxes

outside the grid otherwise you can enable some input boxes there to edit it.


After editing the row, get the row id and replace the previous row with the current row.


For deleting the row, You can delete a row with a checkbox which can provide option to get

the particular row id.

This article will be helpful to create a dynamic table and dynamic grid using javascript and


I have used DOM for the same purpose. The code is given below.
function addRowToTable()
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text'; = 'txtRow' + iteration; = 'txtRow' + iteration;
  el.size = 40;

function removeRowFromTable()
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);

<form action="sample.html">


<input type="button" value="Add" onclick="addRowToTable();" />

<input type="button" value="Remove" onclick="removeRowFromTable();" />

<input type="button" value="Submit" onclick="validateRow(this.form);" />

<input type="checkbox" id="chkValidate" /> Validate Submit



<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress

<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>


<table border="1" id="tblSample">


<th colspan="3">Sample table</th>




<td><input type="text" name="txtRow1"

id="txtRow1" size="40" /></td>




If anybody have doubts about this article, feel free to message me.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

sathesh pandian
Technical Lead
India India
have been working in web technologies for the last 8 years.

You may also be interested in...


Comments and Discussions

QuestionDisplay the given inputs in the format of table using javascript Pin
Member 1327067620-Jun-17 21:58
memberMember 1327067620-Jun-17 21:58 
Questiondisplay of the contents of a form in table using html Pin
Member 119549972-Sep-15 20:02
memberMember 119549972-Sep-15 20:02 
QuestionNeed to develop an editable grid Pin
rahulkumar_ericsson29-Apr-12 22:13
memberrahulkumar_ericsson29-Apr-12 22:13 
GeneralAutomatoin time table Pin
sureshvallapu10-Jul-10 4:13
membersureshvallapu10-Jul-10 4:13 
GeneralRe: Automatoin time table Pin
sathesh_pandian10-Jul-10 6:58
membersathesh_pandian10-Jul-10 6:58 
GeneralMy vote of 1 Pin
Syed Javed16-Dec-09 12:13
memberSyed Javed16-Dec-09 12:13 
GeneralJava script to remove duplicates in a html page Pin
kimjim43612-Mar-09 21:49
memberkimjim43612-Mar-09 21:49 
NewsMore javascript articles [modified] Pin
codemobile31-Oct-08 21:33
membercodemobile31-Oct-08 21:33 
Generalpls help me Pin
poombatta25-Sep-08 2:37
memberpoombatta25-Sep-08 2:37 
GeneralRe: pls help me Pin
sathesh_pandian3-Nov-08 3:57
membersathesh_pandian3-Nov-08 3:57 
GeneralHi Pin
Exelioindia24-Apr-08 5:30
memberExelioindia24-Apr-08 5:30 
GeneralRe: Hi Pin
sathesh_pandian24-Apr-08 6:32
membersathesh_pandian24-Apr-08 6:32 
GeneralSource code is missing Pin
Anil Srivastava17-Apr-08 21:07
memberAnil Srivastava17-Apr-08 21:07 
GeneralRe: Source code is missing Pin
sathesh_pandian21-Apr-08 21:36
membersathesh_pandian21-Apr-08 21:36 
GeneralSource code missing Pin
TBermudez17-Apr-08 8:31
memberTBermudez17-Apr-08 8:31 
GeneralRe: Source code missing Pin
sathesh_pandian21-Apr-08 21:37
membersathesh_pandian21-Apr-08 21:37 
GeneralIts good Pin
shakirhussain9-Nov-07 21:18
membershakirhussain9-Nov-07 21:18 
GeneralRe: Its good Pin
sathesh_pandian13-Nov-07 2:03
membersathesh_pandian13-Nov-07 2:03 
GeneralNot the best way Pin
SeanKinsey16-Jul-07 22:22
memberSeanKinsey16-Jul-07 22:22 
GeneralRe: Not the best way Pin
sathesh_pandian18-Jul-07 22:00
membersathesh_pandian18-Jul-07 22:00 
GeneralRe: Not the best way Pin
madhan861920-Jul-08 21:21
membermadhan861920-Jul-08 21:21 
GeneralRe: Not the best way Pin
SeanKinsey20-Jul-08 23:15
memberSeanKinsey20-Jul-08 23:15 
QuestionHow to edit, delete and get values Pin
Rehan Hussain16-Jul-07 21:03
memberRehan Hussain16-Jul-07 21:03 
AnswerRe: How to edit, delete and get values [modified] Pin
sathesh_pandian18-Jul-07 22:08
membersathesh_pandian18-Jul-07 22:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180221.1 | Last Updated 17 Apr 2008
Article Copyright 2007 by sathesh pandian
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid