JAVASCRIPT - 如何将数据保存到数组。

Question

我正在尝试编辑并将新数据保存到我的阵列，但是当你按下保存时它会消失。当你添加新人时，我似乎无法保存新数据。每次我点击保存它没有任何剂量。请帮我。

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: 'Bob', lastName: 'Petterson', dob: '13/12/1988'},
            {name: 'Anna', lastName: 'Jones', dob: '06/02/1968'},
            {name: 'Catt', lastName: 'Milton', dob: '01/06/2000'},
            {name: 'Eliza', lastName: 'White', dob: '30/11/1970'},
            {name: 'Dan', lastName: 'Brown', dob: '15/08/1999'}
        ];

        $('.search').change(function(event) {
            searchedName = event.target.value;
        })
        table.append(tbody);
        draw();
        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><button onclick=delRow('+i+') >delete</button></td></tr>'
                 )
            }
        )
    }   

        var editableRow2 = "<td><input id='name'/></td><td><input id='lastName'/></td><td><input id='dob' type='date'/></td><td><button onclick=saveRow()>save</button></td>";

        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>";
            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 sortRows = function(sortBy) {
            isAscending[sortBy] = !isAscending[sortBy];
            $('#'+sortBy).text(isAscending[sortBy] ? '\\/' : '/\\');

            draw();
        };

        var delRow = function(num){

            data.splice(num,1);
            draw();
        }

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

        var saveRow = function(num){

                 data[num].name = $('#name').val();
                 data[num].lastName = $('#lastName').val()    
                 data[num].dob = $('#dob').val();
                 draw();

            }