Recently, I encountered an operation to dynamically add and delete table rows in my project

The HTML code

<table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem">
<tr >
<td colspan="8" bgcolor="#96E0E2" style="height:30px;" ><h3 style="text-align:center; margin:0;"> Main learning resume </h3></td>
</tr>
<tr id="tr1">
<td class="tdStyle2"> All the time  </td>

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

<td class="tdStyle2"> What learn professional </td>

<td class="tdStyle2"> Eductional systme </td>

<td class="tdStyle2"> A degree in </td>

<td class="tdStyle2"> Learning style </td>

<td class="tdStyle2"> Level of education </td>

<td class="tdStyle2">
<input type="button" name="LearnAdd" value=" add " onclick="LearnAddSignRow()" />
<input name='LearnTRLastIndex' type='hidden' id='LearnTRLastIndex' value="1" />
</td>

</tr>
</table>

Javascript code:

<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 learning resume
function LearnAddSignRow(){ //Read the line number of the last line and store it in the LearnTRLastIndex text box
var LearnTRLastIndex = findObj("LearnTRLastIndex",document);
var rowID = parseInt(LearnTRLastIndex.value);

var signFrame = findObj("LearnInfoItem",document);
//Add the line
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "LearnItem" + rowID;

//Add column: starting and ending time
var newNameTD=newTR.insertCell(0);
//Add column content
newNameTD.innerHTML = "<input name='txtLearnStartDate" + rowID + "' id='txtLearnStartDate" + rowID + "' type='text' class='inputStyle' />";

//Add column: school of graduation
var newNameTD=newTR.insertCell(1);
//Add column content
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' class='inputStyle' />";

//Add column: major
var newEmailTD=newTR.insertCell(2);
//Add column content
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' class='inputStyle' />";

//Add column: length of schooling
var newTelTD=newTR.insertCell(3);
//Add column content
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' class='inputStyle' />";

//Add column: degree
var newMobileTD=newTR.insertCell(4);
//Add column content
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />";

//Add columns: learn how
var newMobileTD=newTR.insertCell(5);
//Add column content
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />";

//Add 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 line number to the next line
LearnTRLastIndex.value = (rowID + 1).toString() ;
}
//Deletes the specified row
function LearnDeleteRow(rowid){
var signFrame = findObj("LearnInfoItem",document);
var signItem = findObj(rowid,document);

//Gets the Index of the row to be deleted
var rowIndex = signItem.rowIndex;

//Deletes the row specifying Index
signFrame.deleteRow(rowIndex);

}

}
</script>

Implementation effect: