Click here to Skip to main content
15,867,835 members
Articles / Programming Languages / Javascript
Article

Dynamic Table using html and javascript

Rate me:
Please Sign up or sign in to vote.
2.93/5 (25 votes)
17 Apr 2008CPOL2 min read 785K   4.9K   28   24
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)


Written By
Technical Lead
India India
have been working in web technologies for the last 8 years.

Comments and Discussions

 
QuestionDisplay the given inputs in the format of table using javascript Pin
Member 1327067620-Jun-17 20:58
Member 1327067620-Jun-17 20:58 
The code is fine but i cant get the apt output which i need after giving inputs and click the add button the input values which i gave is not displaying in the table. Can u mail correct code or give any acknowledgement for my question pleasq . Thank you
Questiondisplay of the contents of a form in table using html Pin
Member 119549972-Sep-15 19:02
Member 119549972-Sep-15 19:02 
QuestionNeed to develop an editable grid Pin
rahulkumar_ericsson29-Apr-12 21:13
rahulkumar_ericsson29-Apr-12 21:13 
GeneralAutomatoin time table Pin
sureshvallapu10-Jul-10 3:13
sureshvallapu10-Jul-10 3:13 
GeneralRe: Automatoin time table Pin
sathesh pandian10-Jul-10 5:58
sathesh pandian10-Jul-10 5:58 
GeneralMy vote of 1 Pin
Syed J Hashmi16-Dec-09 11:13
Syed J Hashmi16-Dec-09 11:13 
GeneralJava script to remove duplicates in a html page Pin
kimjim43612-Mar-09 20:49
kimjim43612-Mar-09 20:49 
NewsMessage Closed Pin
31-Oct-08 20:33
codemobile31-Oct-08 20:33 
Generalpls help me Pin
poombatta25-Sep-08 1:37
poombatta25-Sep-08 1:37 
GeneralRe: pls help me Pin
sathesh pandian3-Nov-08 2:57
sathesh pandian3-Nov-08 2:57 
GeneralHi Pin
Exelioindia24-Apr-08 4:30
Exelioindia24-Apr-08 4:30 
GeneralRe: Hi Pin
sathesh pandian24-Apr-08 5:32
sathesh pandian24-Apr-08 5:32 
GeneralSource code is missing Pin
Anil Srivastava17-Apr-08 20:07
Anil Srivastava17-Apr-08 20:07 
GeneralRe: Source code is missing Pin
sathesh pandian21-Apr-08 20:36
sathesh pandian21-Apr-08 20:36 
GeneralSource code missing Pin
TBermudez17-Apr-08 7:31
TBermudez17-Apr-08 7:31 
GeneralRe: Source code missing Pin
sathesh pandian21-Apr-08 20:37
sathesh pandian21-Apr-08 20:37 
GeneralIts good Pin
shakirhussain9-Nov-07 20:18
shakirhussain9-Nov-07 20:18 
GeneralRe: Its good Pin
sathesh pandian13-Nov-07 1:03
sathesh pandian13-Nov-07 1:03 
GeneralNot the best way Pin
Øyvind Sean Kinsey16-Jul-07 21:22
Øyvind Sean Kinsey16-Jul-07 21:22 
GeneralRe: Not the best way Pin
sathesh pandian18-Jul-07 21:00
sathesh pandian18-Jul-07 21:00 
GeneralRe: Not the best way Pin
madhan861920-Jul-08 20:21
madhan861920-Jul-08 20:21 
GeneralRe: Not the best way Pin
Øyvind Sean Kinsey20-Jul-08 22:15
Øyvind Sean Kinsey20-Jul-08 22:15 
QuestionHow to edit, delete and get values Pin
Rehan Hussain16-Jul-07 20:03
Rehan Hussain16-Jul-07 20:03 
AnswerRe: How to edit, delete and get values [modified] Pin
sathesh pandian18-Jul-07 21:08
sathesh pandian18-Jul-07 21: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.