データを配列に保存する方法 - javascript

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関数に追加します。その後あなたのテーブルにeditRow内部editableRow（入れ

Answer 2

）とsaveRow（への呼び出しをパラメータ化するROWNUMBERを使用）

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行。

P.S.あなたはすでにjQueryを使用していますが、これを使用すると、The preferred way of creating a new element with jQuery要素を作成する方が良いでしょう。