Question

有谁能告诉我如何将数据保存到数组并显示它？点击编辑按钮后，您将填写所有详细信息，保存后应替换当前数据。

<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

通过对您所拥有的内容进行一些更改，您可以执行此操作：

首先，在函数中包装输出表的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>'
            )
        }
    )
}

然后将ID添加到输入元素。

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值中的rowNumber，如下所示：

onclick=saveRow(" + rowNumber + ")

您可以看到上面的整行，并注意我将该变量移动到editRow函数中。

Answer 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了，如果你使用它可能会更好：The preferred way of creating a new element with jQuery来创建你的元素，这样代码就更具可读性了。

如何将数据保存到数组 - javascript

2 个答案: