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"),
    $clone = $row.clone().appendTo(jQtable);

  $clone.find('[id]').attr('id', function(i, id) {
    return 10 + +id;
  });
  $clone.find('label').remove();
  $clone.find('input').each(function() {
    $(this).before('<label for="' + this.id + '">' + this.id + '</label>')
  })
}

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

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