HTML CODE

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
 <tr>
 <td>11
 <label for="11"></label>
 <input type="text" name="11" id="11" />
 </td>
 <td>12
 <label for="12"></label>
 <input type="text" name="12" id="12" />
 </td>
 <td>13
 <label for="13"></label>
 <input type="text" name="13" id="13" />
 </td>
 <td><a href="#">del</a>
</td>
 </tr>
 </table>
<button type="button" id="addRow">add row</button> 

JQuery Library

https://code.jquery.com/jquery-1.7.2.js

 

Javascript

function addTableRow(jQtable) {
 var lastId = jQtable.find("tr:last td:first input").attr("id");
 var newId = parseInt(lastId) + 10;

 var row = $('<tr />');

 for (var i = 0; i <= 2; i++) {
 var thisId = newId + i;
 var cell = $('<td />');
 var label = $('<label for="' + thisId + '">' + thisId + '</label>');
 var input = $('<input type="text" name="' + thisId + '" id="' + thisId + '" />');
 cell.append(label, input);
 row.append(cell);
 }

 row.append('<td><a href="#">del</a></td>');
 jQtable.append(row);
}

$('#addRow').click(function() {
 addTableRow($('#mans'));
});

$(function () {
 $('table').on('click', 'tr a', function (e) {
 e.preventDefault();
 $(this).parents('tr').remove();
 });
});
Advertisements