Hinzufügen Zeile dynamisch - anhängen Reihe von oben

Question

<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> 

Add Reihe

http://jsfiddle.net/yKjuw/283/

Ich habe durch die meisten dieser Fragen geht und wie ich keine Ahnung habe, was ich tue. Mit der obigen Fiedel können Sie sehen, dass das Namensattribut der ID der FIRST-Tabelle td entspricht. Ich brauche den Namen jeder Spalte, damit sie gleich bleibt. Ich habe versucht, andere Variablen mit td hinzuzufügen: zweite td: dritte, aber die Funktion konnte überhaupt nicht arbeiten. Kann jemand helfen?

Answer 1

Sie den Namen des Eingangs auf der Grundlage der letzten Reihe und der Index des aktuellen Eingangselement erhalten können wie

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

Demo: Fiddle

---

Sie .clone() verwenden können, um dieses

zu vereinfachen

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>') 
    }) 
} 

Demo: Fiddle

Answer 2

Oder diese: Fiddle

Verwenden Klon, das einfach. jQuery clone

function addTableRow(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); 
} 
function removeRow(e){ 
    e.preventDefault(); 
    $(this).parents('tr').remove(); 
} 
$(function() { 
    $('#addRow').on('click', addTableRow); 
    $('table tr>td>a').on('click', removeRow); 
});