Adding Row Dynamically - Append Row From Above

Question

Solution 1:

You can get the name of the input based on the last row and index of current input element like

functionaddTableRow(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);
}

Demo: Fiddle

You can use .clone() to simplify this

functionaddTableRow(jQtable) {
  var$row = jQtable.find("tr:last"),
    $clone = $row.clone().appendTo(jQtable);

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

Demo: Fiddle

Solution 2:

Or this: Fiddle

Use clone, its simple. jQuery clone

functionaddTableRow(e) {
    var row = $('#mans tr:last');
        row = row.clone(true);
        row.find('>td>input').each(function(){
            var t = $(this), id = t.attr('id'), new_id = id*1+10;
            t.attr('id',new_id);
        });
    $('#mans').append(row);
}
functionremoveRow(e){
    e.preventDefault();
    $(this).parents('tr').remove();
}
$(function () {
    $('#addRow').on('click', addTableRow);
    $('table tr>td>a').on('click', removeRow);
});

JavaScript OfficialSite

Adding Row Dynamically - Append Row From Above

Solution 1:

Solution 2:

Post a Comment for "Adding Row Dynamically - Append Row From Above"