JS Dynamic Automatic Add Delete

Dome file:

<form>
<table cellpadding= "0" cellspacing= "0" class= "right-table" style= "border-collapse:collapse; width:710px; "id=" Testtbl ">
<tr>
&LT;TD style= "width:165px" ><input type= "text" class= "text name" placeholder= "name" ></td>
&LT;TD style= "width:180px" ><input type= "text" class= "text value" placeholder= "value" ></td>
&LT;TD style= "width:42px" ><span class= "del" onclick= "del (This)" ></span></td>
</tr>
</table>
</form>

JS file:

<script type= "Text/javascript" >
Automatically add rows
function AddRow () {
var newtal = document.getElementById (' testtbl '). InsertRow (0);
var newTd0 = Newtal.insertcell (0);
var newTd1 = Newtal.insertcell (1);
var newTd2 = Newtal.insertcell (2);
newtd0.innerhtml = ' <td style= ' width:165px "><input type=" text "class=" text name "placeholder=" name "></ Td> ';
newtd1.innerhtml = ' <td style= ' width:180px "><input type=" text "class=" text value "placeholder=" value "> </td> ';
newtd2.innerhtml = ' <td style= ' width:42px ' ><span class= ' del ' onclick= ' del (this) ' &GT;&LT;/SPAN&GT;&LT;/TD > ';
}

Automatically delete rows
Function del (r) {
var I=r.parentnode.parentnode.rowindex;
document.getElementById (' Testtbl '). DeleteRow (i);
}

</script>

Explain:

The InsertCell () method is used to insert an empty <td> element at a specified location on one line of the HTML table

The method creates a new <td> element and inserts it into the specified position in the row. The new cell is inserted before the table element that is currently at the specified position in index. If index equals the number of cells in the row, the new cell is appended to the end of the row.

Note that this method can only be inserted into the <td> data table element. If you need to add a header to a row, you must create and insert a <th> element with the Document.createelement () method and the Node.insertbefore () method (or a related method).

JS Dynamic Automatic Add Delete