So speichern Sie Daten in einem Array - JavaScript

Question

Kann mir jemand zeigen, wie man Daten in einem Array speichert und anzeigt? Nachdem Sie auf Bearbeiten geklickt haben, geben Sie alle Details ein und beim Speichern sollten Sie die aktuellen Daten ersetzen.

<div class = "main"></div> 

---

var table = $(".main").append("<table></table>"); 
     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'} 
     ]; 

     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></td></tr>' 
       ) 
      } 
     ) 

     var editableRow = "<td><input/></td><td><input/></td><td><input type='date'/></td><td><button onclick=saveRow()>save</button></td>"; 
     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(editableRow); 
      $('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); 
      $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(3) > input').val(dob); 
     } 

     var saveRow = function(num){} 

Answer 1

Mit ein paar Änderungen an, was Sie haben, dies zu tun:

Zuerst Code wickeln, die den HTML-Code für die Tabelle in einer Funktion gibt, so dass Sie re- können benutze es. Da Sie jede Zeile anhängen möchten, müssen Sie zuerst die alte Tabelle löschen und dann alle Zeilen anhängen. Jedes Mal, wenn Sie diese Funktion aufrufen, wird Ihre Tabelle mit den neuesten Daten aktualisiert.

function draw() { 
    $('tbody').html(''); 
    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></td></tr>' 
      ) 
     } 
    ) 
} 

Dann IDs auf Ihre Eingabeelemente hinzufügen.

var editRow = function(rowNumber) { 
    var editableRow = "<td><input id='name'/></td><td><input id='lastName'/></td><td><input id='dob' type='date'/></td><td><button onclick=saveRow(" + rowNumber + ")>save</button></td>"; 

So können Sie ihre Werte leicht in der saveRow-Funktion einlesen. Setzen Sie die Daten basierend auf dem Index des Arrays in Ihrem Datenarray zurück und rufen Sie draw() auf.

var saveRow = function(num){ 
    data[num].name = $('#name').val(); 
    data[num].lastName = $('#lastName').val()  
    data[num].dob = $('#dob').val(); 
    draw(); 
} 

Um den Index zu erhalten Sie auf der rowNumber im Onclick Wert Ihrer Taste wie diese haben werde:

onclick=saveRow(" + rowNumber + ") 

Sie können die gesamte Fülle oben und bemerken sehe ich bewegt, dass Variable in die editRow-Funktion.

Answer 2

Put editableRow innen EditRow() und verwenden Sie die rowNumber den Anruf zu saveRow() danach

var editRow = function(rowNumber) { 
    var editableRow = "<td><input/></td><td><input/></td><td><input type='date'/></td><td><button onclick=saveRow("+rowNumber+")>save</button></td>"; 
    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(editableRow); 
    $('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); 
    $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(3) > input').val(dob); 
} 

var saveRow = function(num){ 
    var name = $('tbody > tr:nth-child('+(num + 1)+') > td:first-child > input').val(); 
    var lastName = $('tbody > tr:nth-child('+(num + 1)+') > td:nth-child(2) > input').val(); 
    var dob = $('tbody > tr:nth-child('+(num + 1)+') > td:nth-child(3) > input').val(); 
    data[num] = {name, lastName, dob}; 
} 

Reappend die Reihe auf den Tisch zu parametrieren.

P.S. Sie verwenden bereits jQuery, vielleicht ist es besser, wenn Sie dies verwenden: The preferred way of creating a new element with jQuery, um Ihre Elemente zu erstellen, nur so dass der Code besser lesbar ist.