как сохранить данные в массив-javascript

Может ли кто-нибудь показать мне, как сохранить данные в массив и отобразить их? После того, как вы нажмете кнопку редактирования вы заполните все детали, и при сохранении он должен заменить текущие данные.

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

2 ответа

  1. С несколькими изменениями к тому, что у вас есть, вы можете сделать это:

    Во-первых, оберните код, который выводит HTML для таблицы, в функцию, чтобы можно было использовать его повторно. Так как вы добавляете каждую строку, вы хотите сначала очистить старую таблицу, а затем добавить все строки. Теперь каждый раз, когда вы вызываете эту функцию, обновит вашу таблицу с последними данными.

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

    Затем добавьте идентификаторы к входным элементам.

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

    Таким образом, вы можете легко прочитать их значения в функции saveRow. Установите данные обратно в массив данных на основе индекса массива и вызова draw().

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

    Для того, чтобы получить индекс, вам придется поднять номер строки в значении onclick вашей кнопки, как это:

    onclick=saveRow(" + rowNumber + ")
    

    Вы можете увидеть полную строку выше и заметить, что я переместил эту переменную в функцию editRow.

  2. Поместите editableRow внутрь editRow () и используйте rowNumber для параметризации вызова 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};
    }
    

    После этого верните строку в таблицу.

    P.S. Вы уже используете jQuery, возможно, будет лучше, если вы используете это: предпочтительный способ создания нового элемента с jQuery для создания ваших элементов, просто чтобы код был более читаемым.