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">
function CmdAdd_onclick() {
var newTable,startTag,endTag;
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;
trContents=document.body.getElementsByTagName('TR');
if(trContents.length>1)
{
for(i=1;i<trContents.length;i++)
{
if(trContents(i).innerHTML)
{
newTable+="<TR>";
newTable+=trContents(i).innerHTML;
newTable+="</TR>";
}
}
}
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;
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;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
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.
