JQuery Hinzufügen und Dateneingabe

Question

Ich habe Probleme beim Speichern die neue Zeile zu speichern. Wenn ich auf "Person hinzufügen" klicke, kann ich die Daten eingeben. Ich bin mir jedoch nicht sicher, wie ich sie speichern und eine neue Zeile hinzufügen kann.

Ich weiß, ich muss eine Funktion für die Speichern-Taste funktionieren, aber ich bin fest, wie es funktioniert. Ich habe es ein paar Mal versucht, aber ohne Erfolg.

var isNewLineToggled = false; 
var isAscending = { 
    name : false, 
    lastName: false, 
    dob: false 
}; 
$(".main").append("<input placeholder='search by name' class='search'/><br/><br/>") 
$(".main").append("<button onclick=addPerson()>add a person</button><br/><br/>") 
var table = $(".main").append("<table></table>"); 
var thead = '<thead><tr></tr></thead>'; 
table.append(thead); 
var header = [ 
    { title: 'Name', sortBy: 'name'}, 
    { title: 'Last Name', sortBy: 'lastName'}, 
    { title: 'Date of birth', sortBy: 'dob'} 
].map(
    function(header) { 
    var sortButton = '<button id="' + header.sortBy + '" onclick=sortRows("'+ header.sortBy + '")>/\\</button>'; 
     $('thead').append('<th>' + header.title + ' ' + sortButton + '</th>'); 
    } 
) 
var tbody = "<tbody></tbody>"; 
var data = [ {name: 'Peter', lastName: 'Petterson', dob: '13/12/1988'}, 
    {name: 'Anna', lastName: 'Jones', dob: '06/02/1968'}, 
    {name: 'John', lastName: 'Milton', dob: '01/06/2000'}, 
    {name: 'James', lastName: 'White', dob: '30/11/1970'}, 
    {name: 'Luke', lastName: 'Brown', dob: '15/08/1999'} 
]; 
$('.search').change(function(event) { 
    searchedName = event.target.value; 
}) 
table.append(tbody); 
data.map(
    function(row, i) { 
     $('tbody').append(
      '<tr><td>' + row.name + 
      '</td><td>' + row.lastName + 
      '</td><td>' + row.dob + 
      '</td><td><button onclick=editRow('+i+')>edit</button><button>delete</button></td></tr>' 
     ) 
    } 
) 
var editableRow = "<td><input/></td><td><input/></td><td><input type='date'/></td><td><button onclick=saveRow()>save</button></td>"; 

var addPerson = function() { 
    isNewLineToggled = !isNewLineToggled; 
    if (isNewLineToggled) { 
     $('tbody').prepend('<tr>' + editableRow + '</tr>') 
    } else { 
     $('tbody > tr:first-child').remove(); 
    } 
} 

var editRow = function(rowNumber) { 
    var name = $('tbody > tr:nth-child('+(rowNumber + 1)+') >  td:first-child').text(); 
    var lastName = $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(2)').text(); 
    var dob = $('tbody > tr:nth-child('+(rowNumber + 1)+') >  td:nth-child(3)').text(); 
    $('tbody > tr:nth-child('+(rowNumber + 1)+')').html(editableRow2); 
    $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:first-child > input').val(name); 
    $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(2) > input').val(lastName); 

} 

Answer 1

Sie können Zeilen wie diese, zwei kleine Änderungen hinzu:

$(".main").append("<button class='add'>add a person</button><br/><br/>")

entfernen Inline-Event-Handler, keine Notwendigkeit dafür. Und Ihre Funktion könnte sein:

$('body').on('click','.add', function() { //you will need event delegation, because of dynamically added elements 
       isNewLineToggled = !isNewLineToggled; 

       if (isNewLineToggled) { 
        $('tbody').prepend('<tr>' + editableRow + '</tr>') 
       } else { 
        $('tbody > tr:first-child').remove(); 
       } 
       }); 

Da Ihr editableRow Variable nicht definiert ist, ich nur eine Zelle mit Text für Demo verwendet haben:

https://jsfiddle.net/2c97auey/1/

P. S. Ihr editableRow sollte Eingabewerte haben, die ordnungsgemäß in Zellen platziert sind. Sollte nicht zu schwer sein.