JS Implementation dynamic Add Delete table row sample _javascript Tips

A recent project encountered an operation to dynamically add and delete table rows, as follows

HTML code

Copy Code code as follows:

<table cellpadding= "0" cellspacing= "0" border= "1" style= "Margin:auto; width:96% "id=" Learninfoitem ">
<tr >
&LT;TD colspan= "8", "bgcolor=" #96E0E2 "style=" height:30px; ">

</tr>
<tr id= "TR1" >
&LT;TD class= "TdStyle2" > Commencement time </td>

&LT;TD class= "TdStyle2" > Graduate Schools </td>

&LT;TD class= "TdStyle2" > Professional </td>

&LT;TD class= "TdStyle2" > Educational system </td>

&LT;TD class= "TdStyle2" > Degree </td>

&LT;TD class= "TdStyle2" > Learning Methods </td>

&LT;TD class= "TdStyle2" > Literacy </td>

&LT;TD class= "TdStyle2" >
<input type= "button" Name= "Learnadd" value= "Add" onclick= "Learnaddsignrow ()"/>
<input name= ' learntrlastindex ' type= ' hidden ' id= 's ' learntrlastindex ' value= ' 1 '/>
</td>

</tr>
</table>

JavaScript code:

Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" >//example:obj = Findobj ("Image1");

function Findobj (theobj, Thedoc)
{
var p, 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);
return foundobj;
}


Add a line of study resume
function Learnaddsignrow () {//reads the line number of the last line, stored in the Learntrlastindex text box
var learntrlastindex = findobj ("Learntrlastindex", document);
var RowID = parseint (Learntrlastindex.value);

var signframe = findobj ("Learninfoitem", document);
Add rows
var newtr = Signframe.insertrow (signFrame.rows.length);
Newtr.id = "Learnitem" + RowID;

Adding columns: Commencement time
var Newnametd=newtr.insertcell (0);
Add Column Contents
newnametd.innerhtml = "<input name= ' txtlearnstartdate" + RowID + "' id= ' txtlearnstartdate" + RowID + "' type= ' text ' CLA ss= ' Inputstyle '/> ';

Add columns: Graduate Schools
var Newnametd=newtr.insertcell (1);
Add Column Contents
newnametd.innerhtml = "<input name= ' txtname" + RowID + "' id= ' txtname" + RowID + "' type= ' text ' class= ' Inputstyle '/&gt ;";

Adding columns: What you learn
var Newemailtd=newtr.insertcell (2);
Add Column Contents
newemailtd.innerhtml = "<input name= ' Txtemail" + RowID + "' id= ' txtemail" + RowID + "' type= ' text ' class= ' Inputstyle '/ > ";

Adding columns: Academic structure
var Newteltd=newtr.insertcell (3);
Add Column Contents
newteltd.innerhtml = "<input name= ' Txttel" + RowID + "' id= ' Txttel" + RowID + "' type= ' text ' class= ' inputstyle '/> '";

Add Column: Degree
var Newmobiletd=newtr.insertcell (4);
Add Column Contents
newmobiletd.innerhtml = "<input name= ' txtmobile" + RowID + "' id= ' txtmobile" + RowID + "' type= ' text ' class= ' Inputstyle '/> ';

Adding columns: How to learn
var Newmobiletd=newtr.insertcell (5);
Add Column Contents
newmobiletd.innerhtml = "<input name= ' txtmobile" + RowID + "' id= ' txtmobile" + RowID + "' type= ' text ' class= ' Inputstyle '/> ';

Adding columns: Educational level
var Newcompanytd=newtr.insertcell (6);
Add Column Contents
newcompanytd.innerhtml = "<input name= ' Txtcompany" + RowID + "' id= ' Txtcompany" + RowID + "' type= ' text ' class= ' inputst Yle '/> ';


Add Column: Delete button
var Newdeletetd=newtr.insertcell (7);
Add Column Contents
newdeletetd.innerhtml = "<div align= ' center ' ><input id= ' Txtdel ' + RowID +" ' type= ' button ' value= ' delete ' onclick=\ ' Learndeleterow (' Learnitem "+ RowID +" ") \ class= ' Inputstyle '/></div> ';

Push line number to next line
Learntrlastindex.value = (RowID + 1). ToString ();
}
Delete specified line
function Learndeleterow (ROWID) {
var signframe = findobj ("Learninfoitem", document);
var Signitem = findobj (rowid,document);

Gets the index of the row that will be deleted
var rowIndex = Signitem.rowindex;

Deletes the row for the specified index
Signframe.deleterow (RowIndex);

}

}
</script>

Implementation effect: