Example of dynamically adding and deleting Table rows using Js

Recently, the project encountered the following operations to dynamically add or delete table rows:

Html code
Copy codeThe Code is as follows:
<Table cellpadding = "0" cellspacing = "0" border = "1" style = "margin: auto; width: 96%;" id = "LearnInfoItem">
<Tr>
<Td colspan = "8" bgcolor = "#96E0E2" style = "height: 30px;">

</Tr>
<Tr id = "tr1">
<Td class = "tdStyle2"> Start time </td>

<Td class = "tdStyle2"> Graduate School </td>

<Td class = "tdStyle2"> major </td>

<Td class = "tdStyle2"> Educational System </td>

<Td class = "tdStyle2"> degree </td>

<Td class = "tdStyle2"> learning method </td>

<Td class = "tdStyle2"> educational level </td>

<Td class = "tdStyle2">
<Input type = "button" name = "LearnAdd" value = "add" onclick = "LearnAddSignRow ()"/>
<Input name = 'learntrlastindex' type = 'den den 'id = 'learntrlastindex' value = "1"/>
</Td>

</Tr>
</Table>

Javascript code:
Copy codeThe Code is 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%].doc ument;
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 =.doc ument );
If (! FoundObj & document. getElementById)
FoundObj = document. getElementById (theObj );
Return foundObj;
}


// Add a resume row
Function LearnAddSignRow () {// read the row number of the last row and store it 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;

// Add a column: Start Time
Var newNameTD = newTR. insertCell (0 );
// Add column content
NewNameTD. innerHTML = "<input name = 'txtlearnstartdate" + rowID + "'id = 'txtlearnstartdate" + rowID + "'Type = 'text' class = 'inputstyle'/> ";

// Add a column: Graduate School
Var newNameTD = newTR. insertCell (1 );
// Add column content
NewNameTD. innerHTML = "<input name = 'txtname" + rowID + "'id = 'txtname" + rowID + "'Type = 'text' class = 'inputstyle'/> ";

// Add a column: Major
Var newEmailTD = newTR. insertCell (2 );
// Add column content
NewEmailTD. innerHTML = "<input name = 'txtemail" + rowID + "'id = 'txtemail" + rowID + "'Type = 'text' class = 'inputstyle'/> ";

// Add a column: Academic System
Var newTelTD = newTR. insertCell (3 );
// Add column content
NewTelTD. innerHTML = "<input name = 'txttel" + rowID + "'id = 'txttel" + rowID + "'Type = 'text' class = 'inputstyle'/> ";

// Add a column: Degree
Var newMobileTD = newTR. insertCell (4 );
// Add column content
NewMobileTD. innerHTML = "<input name = 'txtmobile" + rowID + "'id = 'txtmobile" + rowID + "'Type = 'text' class = 'inputstyle'/> ";

// Add a column: Learning Method
Var newMobileTD = newTR. insertCell (5 );
// Add column content
NewMobileTD. innerHTML = "<input name = 'txtmobile" + rowID + "'id = 'txtmobile" + rowID + "'Type = 'text' class = 'inputstyle'/> ";

// Add a column: education level
Var newCompanyTD = newTR. insertCell (6 );
// Add column content
NewCompanyTD. innerHTML = "<input name = 'txtcompany" + rowID + "'id = 'txtcompany" + rowID + "'Type = 'text' class = 'inputstyle'/> ";


// Add column: delete button
Var newDeleteTD = newTR. insertCell (7 );
// Add column content
NewDeleteTD. innerHTML = "<div align = 'center'> <input id = 'txtdel" + rowID + "'Type = 'button' value = 'delete' onclick = \" LearnDeleteRow (' learnItem "+ rowID + "') \ "class = 'inputstyle'/> </div> ";

// Push the row number to the next row
LearnTRLastIndex. value = (rowID + 1). toString ();
}
// Delete a specified row
Function LearnDeleteRow (rowid ){
Var signFrame = findObj ("LearnInfoItem", document );
Var signItem = findObj (rowid, document );

// Obtain the Index of the row to be deleted
Var rowIndex = signItem. rowIndex;

// Delete the row of the specified Index
SignFrame. deleteRow (rowIndex );

}

}
</Script>

Effect: