How add the Edit button and table border.
[HTML]<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dynami c Table</title>
<script language="javas cript" type="text/javascript">
// <!CDATA[
function CmdAdd_onclick( ) {
var newTable,startT ag,endTag;
//Creating a new table
startTag="<TABL E id='mainTable'> <TBODY><TR><T D style=\"WIDTH: 120px\">User ID</TD><TD style=\"WIDTH: 120px\">User Name</TD><TD style=\"WIDTH: 120px\">Departm ent</TD></TR>"
endTag="</TBODY></TABLE>"
newTable=startT ag;
var trContents;
//Get the row contents
trContents=docu ment.body.getEl ementsByTagName ('TR' );
if(trContents.l ength>1)
{
for(i=1;i<trCon tents.length;i+ +)
{
if(trContents(i ).innerHTML)
{
// Add previous rows
newTable+="<TR> ";
newTable+=trCon tents(i).innerH TML;
newTable+="</TR>";
}
}
}
//Add the Latest row
newTable+="<TR> <TD style=\"WIDTH: 120px\" >" + document.getEle mentById('useri d').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" + document.getEle mentById('usern ame').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" + document.getEle mentById('depar tment').value +"</TD></TR></table>";
newTable+=endTa g;
//Update the Previous Table With New Table.
document.getEle mentById('table Div').innerHTML =newT able;
}
// ]]>
</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>Departme nt</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 border="1" id="mainTable" >
<tr style="width:12 0px " >
<td >User ID</td>
<td>User Name</td>
<td>Departmen t</td>
</tr>
</table>
</div>
</form>
</body>
</html>[/HTML]
[HTML]<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dynami c Table</title>
<script language="javas cript" type="text/javascript">
// <!CDATA[
function CmdAdd_onclick( ) {
var newTable,startT ag,endTag;
//Creating a new table
startTag="<TABL E id='mainTable'> <TBODY><TR><T D style=\"WIDTH: 120px\">User ID</TD><TD style=\"WIDTH: 120px\">User Name</TD><TD style=\"WIDTH: 120px\">Departm ent</TD></TR>"
endTag="</TBODY></TABLE>"
newTable=startT ag;
var trContents;
//Get the row contents
trContents=docu ment.body.getEl ementsByTagName ('TR' );
if(trContents.l ength>1)
{
for(i=1;i<trCon tents.length;i+ +)
{
if(trContents(i ).innerHTML)
{
// Add previous rows
newTable+="<TR> ";
newTable+=trCon tents(i).innerH TML;
newTable+="</TR>";
}
}
}
//Add the Latest row
newTable+="<TR> <TD style=\"WIDTH: 120px\" >" + document.getEle mentById('useri d').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" + document.getEle mentById('usern ame').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" + document.getEle mentById('depar tment').value +"</TD></TR></table>";
newTable+=endTa g;
//Update the Previous Table With New Table.
document.getEle mentById('table Div').innerHTML =newT able;
}
// ]]>
</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>Departme nt</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 border="1" id="mainTable" >
<tr style="width:12 0px " >
<td >User ID</td>
<td>User Name</td>
<td>Departmen t</td>
</tr>
</table>
</div>
</form>
</body>
</html>[/HTML]
Comment