Click here to Skip to main content
11,568,157 members (34,968 online)
Click here to Skip to main content

Dynamic Table using html and javascript

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

Introduction

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 studio.net

Design

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.

debugger;

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="http://www.w3.org/1999/xhtml" >

<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>"

endTag="</TBODY></TABLE>"

newTable=startTag;

var trContents;

//Get the row contents

trContents=document.body.getElementsByTagName('TR');

if(trContents.length>1)

{

for(i=1;i<trContents.length;i++)

{

if(trContents(i).innerHTML)

{

// Add previous rows

newTable+="<TR>";

newTable+=trContents(i).innerHTML;

newTable+="</TR>";

} 

}

}

//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>";

newTable+=endTag;

//Update the Previous Table With New Table.

document.getElementById('tableDiv').innerHTML=newTable;

}

// ]]>

</script>

</head>

<body>

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

<div>

<br />

<label>UserID</label> 

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

<label>UserName</label> 

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

<label>Department</label> 

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

<center>

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



</div>

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

<table id="mainTable">

<tr style="width:120px " >

<td >User ID</td>

<td>User Name</td>

<td>Department</td>

</tr>

</table>

</div>

</form>

</body>

</html>

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.

Add:

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

Edit:

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.

Update:

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

Delete:

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

html.

I have used DOM for the same purpose. The code is given below.
Javascript:
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);
  cellLeft.appendChild(textNode);
  
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
  cellRight.appendChild(el);  
 }

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

<form action="sample.html">

<p>

<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

</p>

<p>

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

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

</p>

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

<tr>

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

</tr>

<tr>

<td>1</td>

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

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



</tr>

</table>

</form>

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

License

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

Share

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

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

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

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

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