how to save datas to an array - javascript

Question

Can anyone show me how to save data to an array and display it? After you hit edit button you fill in all the details and when you save it should replace the current data.

<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

With a few changes to what you have you can do this:

First, wrap your code that outputs the HTML for the table in a function so you can re-use it. Since you are appending each row you'll want to clear the old table first, then append all the rows. Now any time you call this function is will update your table with the latest data.

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

Then add IDs to your input elements.

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

That way you can read in their values easily in the saveRow function. Set the data back in your data array based on the index of the array and call draw().

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

In order to get the index you'll have to up the rowNumber in the onclick value of your button like this:

onclick=saveRow(" + rowNumber + ")

You can see the full line above and notice I moved that variable into the editRow function.

Answer 2

Put editableRow inside editRow() and use the rowNumber to parameterize the call to saveRow()

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 the row to your table afterwards.

PS You're already using jQuery, maybe it's better if you use this: The preferred way of creating a new element with jQuery to create your elements, just so the code's more readable.