Implementation code for dynamically adding rows to table using jquery_jquery

Here, it is done with jquery. The key code is as follows:

Copy code The code is as follows:

//Add data row;
function AddRow(){
var vTb=$("#TbData");//Get the jquery object with table ID=TbData
//All data rows have a .CaseRow Class, get the data row Size
var vNum=$("#TbData tr").filter(".CaseRow").size() 1;//How many data rows does the table have
var vTr=$("#TbData #trDataRow1 "); //Get the first row of data in the table
var vTrClone=vTr.clone(true); //Create a copy object vTrClone of the first row
vTrClone[0].id="trDataRow" vNum ;//Set the first Id as the current acquisition index; prevent repeated addition of multiple data rows with ID trDataRow1; add one at a time;
vTrClone.appendTo(vTb);//Add the copy cell object below the table
}

This method mainly uses the clone function of jquery to clone a row copy of the table. Then add it to the original table.
Delete method key code:

Copy code The code is as follows:

var vNum=$ ("#TbData tr").filter(".CaseRow").size() 1;//How many data rows does the table have;
if(vNum<=2)
{
alert(' Please leave at least one line');
return;
}
var vbtnDel=$(this);//Get the clicked button object
var vTr=vbtnDel.parent("td").parent ("tr");//Get the parent tr object;
if(vTr.attr("id")=="trDataRow1")
{
alert('The first row cannot be deleted!') ; //The first line is the basis for cloning and cannot be deleted
return;
}else{
vTr.remove();
}