how to add the border and edit ,delete button ,plz helme .
Expand|Select|Wrap|Line Numbers
- <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></table>";
- 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 border="1" id="mainTable">
- <tr style="width:120px " >
- <td >User ID</td>
- <td>User Name</td>
- <td>Department</td>
- </tr>
- </table>
- </div>
- </form>
- </body>
- </html>