Wie benutze ich jQuery each() Methode innerhalb eines append()

Question

Ich habe eine Funktion, die eine neue Zeile zu einer Tabelle hinzufügt. Ich habe auch eine Funktion erstellt, die den Wert der Texteingabe mit ähnlichen IDs bekommt.

Was ich tun möchte, ist, die gesammelten Werte an die Tabelle anfügen, eine auf jeder Spalte. Die letzte Spalte enthält einen Link zum Löschen der Zeile. Ich kann nicht herausfinden, wie Iteration (vielleicht eine jede Methode?) Innerhalb einer Append-Methode zu tun. Hier ist mein Code.

hinzufügen Funktionszeile

$('.addrow').click(function(){ 
    $('.datatable > tbody:last-child') 
    .append($('<tr>') 
     .append($('<td>') 
      .append($('<a>') 
       .attr('id', 'deleterow') 
       .attr('href','#') 
       .text('delete') 
      ) 
     ) 
    ); 
}); 

Zeile löschen Funktion

$('.datatable').on('click', '.deleterow', function(){ 
    $(this).closest('tr').remove(); 
}); 

Get Eingabewerte Funktion

$("input[class='textinput']").map(function(){return $(this).val();}).get(); 

Answer 1

Die Codestruktur sollte wie folgt sein:

$("#addrow").click(function() { 
    var new_row = $("<tr>"); 
    $("input.textinput").each(function() { 
     new_row.append($("<td>", { 
      text: $(this).val(); 
     }); 
    }); 
    new_row.append($("<td>").append($("<a>", { 
     "class": "deleterow", 
     "href": "#", 
     "text": "delete" 
    }); 
    $(".datatable tbody").append(new_row); 
}); 

Sie Schleife über die Daten, die Sie in den Tabellenspalten zu füllen verwenden möchten, und in dieser Schleife anhängen Sie jede Zelle.