JS Implementation dynamic Add Delete table row example

<Tablecellpadding= "0"cellspacing= "0"Border= "1"style= "Margin:auto; width:96%;"ID= "Learninfoitem"> <TR> <TDcolspan= "8"bgcolor= "#96E0E2"style= "height:30px;" ><H3style= "text-align:center; margin:0;">Main study Resume</H3></TD> </TR> <TRID= "TR1"> <TDclass= "TdStyle2">Commencement time</TD> <TDclass= "TdStyle2">Graduate Schools</TD> <TDclass= "TdStyle2">Major in the study</TD> <TDclass= "TdStyle2">Academic</TD> <TDclass= "TdStyle2">Degree</TD> <TDclass= "TdStyle2">Learning Style</TD> <TDclass= "TdStyle2">Education</TD> <TDclass= "TdStyle2"> <inputtype= "button"name= "Learnadd"value= "Add"onclick= "Learnaddsignrow ()" /> <inputname= ' Learntrlastindex 'type= ' hidden 'ID= ' Learntrlastindex 'value= "1" /> </TD> </TR> </Table>

JavaScript code:

<script language= "javascript" type= "Text/javascript" >//example:obj = findobj ("Image1");functionfindobj (theobj, thedoc) {varp, I, foundobj;if(!thedoc) Thedoc =document;if(p = theobj.indexof ("?")) > 0 &&parent.frames.length) {thedoc= Parent.frames[theobj.substring (p+1)].document; Theobj= theobj.substring (0, p); } if(! (Foundobj = thedoc[theobj]) &&thedoc.all) Foundobj=Thedoc.all[theobj]; for(i=0;!foundobj && i < theDoc.forms.length; i++) Foundobj=Thedoc.forms[i][theobj]; for(i=0;!foundobj && thedoc.layers && i < theDoc.layers.length; i++) Foundobj=findobj (theobj,thedoc.layers[i].document);if(!foundobj &&document.getElementById) Foundobj=document.getElementById (theobj);returnFoundobj;} //Add a line to learn resumefunctionLearnaddsignrow () {//reads the line number of the last line and stores it in the Learntrlastindex text boxvarLearntrlastindex = Findobj ("Learntrlastindex", document); varRowID =parseint (learntrlastindex.value);varSignframe = Findobj ("Learninfoitem", document); //Adding RowsvarNEWTR =Signframe.insertrow (signFrame.rows.length); Newtr.id= "Learnitem" +RowID;//Add Column: Commencement timevarNewnametd=newtr.insertcell (0); //Add Column Contentsnewnametd.innerhtml = "<input name= ' txtlearnstartdate" + RowID + "' id= ' txtlearnstartdate" + RowID + "' type= ' text ' CLA ss= ' Inputstyle '/> "; //Add a column: Graduate schoolsvarNewnametd=newtr.insertcell (1); //Add Column Contentsnewnametd.innerhtml = "<input name= ' txtname" + RowID + "' id= ' txtname" + RowID + "' type= ' text ' class= ' Inputstyle '/&gt ;"; //Add Column: The major of the studyvarNewemailtd=newtr.insertcell (2); //Add Column Contentsnewemailtd.innerhtml = "<input name= ' Txtemail" + RowID + "' id= ' txtemail" + RowID + "' type= ' text ' class= ' Inputstyle '/ > "; //Add columns: SchoolingvarNewteltd=newtr.insertcell (3); //Add Column Contentsnewteltd.innerhtml = "<input name= ' Txttel" + RowID + "' id= ' Txttel" + RowID + "' type= ' text ' class= ' Inputstyle '/>"; //Add column: DegreevarNewmobiletd=newtr.insertcell (4); //Add Column Contentsnewmobiletd.innerhtml = "<input name= ' txtmobile" + RowID + "' id= ' txtmobile" + RowID + "' type= ' text ' class= ' Inputstyle '/> '; //Add columns: Learning stylevarNewmobiletd=newtr.insertcell (5); //Add Column Contentsnewmobiletd.innerhtml = "<input name= ' txtmobile" + RowID + "' id= ' txtmobile" + RowID + "' type= ' text ' class= ' Inputstyle '/> '; //Add Column: Educational levelvarNewcompanytd=newtr.insertcell (6); //Add Column Contentsnewcompanytd.innerhtml = "<input name= ' Txtcompany" + RowID + "' id= ' Txtcompany" + RowID + "' type= ' text ' class= ' inputst Yle '/> '; //Add Column: Delete buttonvarNewdeletetd=newtr.insertcell (7); //Add Column Contentsnewdeletetd.innerhtml = "<div align= ' center ' ><input id= ' Txtdel" + RowID + "' type= ' button ' value= ' delete ' onclick=\ ' Learndeleterow (' Learnitem ' + RowID + "') \" class= ' Inputstyle '/></div> "; //Advance line number to next lineLearntrlastindex.value = (RowID + 1). toString (); } //Delete the specified linefunctionLearndeleterow (rowid) {varSignframe = Findobj ("Learninfoitem", document); varSignitem =findobj (rowid,document);//gets the index of the row that will be deletedvarRowIndex =Signitem.rowindex;//Delete the row for the specified indexSignframe.deleterow (rowIndex);} </script>

JS Implementation dynamic Add Delete table row example