SO - 36151751

by Arun P Johny

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<form id="form1" name="form1" method="post" action="">
  <table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
    <tr>
      <td>
        <input type="text" name="item[]" id="11" />
      </td>
      <td>
        <input type="text" name="recommendations[]" id="12" />
      </td>
      <td>
        <input type="text" name="importance[]" id="13" />
      </td>
      <td>
        <input type="text" name="quantity[]" id="14" />
      </td>
    </tr>
  </table>
</form>
<button type="button" id="addRow">add row</button>

JavaScript

function addTableRow(jQtable) {
  var $row = jQtable.find("tr:last"),
    $inputs = $row.find('input');
  var lastId = $row.find("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="' + $inputs.eq(i).attr('name') + '" 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();
  });
});