2017-09-30 10 views
0

各テーブルの行とそれぞれの入力(チェックボックス、テキスト、選択)を配列に格納してlocalstorageに格納するにはどうすればいいですか?私はコードのほとんどを完成しました。ビルドする必要があるのは、????部。ありがとう。javascript複数の配列をjsonに

これはjavascriptのコードです:あなたは私が動的テーブルの行を生成する方法を疑問に思う場合

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 
    for(var i=0; i<colCount; i++) { 
     var newcell = row.insertCell(i); 
     newcell.innerHTML = table.rows[0].cells[i].innerHTML; 

    } 
} 

$('#btnSave').on('click', function(e) { 
    e.preventDefault(); 
    var id = $(this).attr("data-id"); 
    var mykey = 'set'+id; 

    // here just to check whether 'set'+id exist or not, no validation performed 
    if(localStorage.getItem(mykey)==null){ 
     console.log('key not found'); 
    } else { 
     console.log('key found'); 
    } 

    // Due to there will be one or more rows, 
    // need to loop the rows and get the inputs within 
    // and store them in localstorage 
    $('#dyn_table tr').each(function(){ 
     var tr = $(this); 
     var checkbox = $(this).find('.big-checkbox').is(':checked'); 
     var itemcode = $(this).find('.dyn_item_code :selected').val(); 
     var amount = $(this).find('.dyn_amount').val(); 
     var reference = $(this).find('.dyn_reference').val(); 

     console.log(checkbox); 
     console.log(itemcode); 
     console.log(amount); 
     console.log(reference); 
    }); 

    localStorage.setItem(mykey, ????); 

}); 

これは、入力ボタンである

<input type="button" value="Add row" onClick="addRow('dyn_table')" /> 

答えて

1

私はあなたの問題を理解している場合、私は知りませんでしたが、これは機能していますか?

var my_table = [] // Create an array for the table 

$('#dyn_table tr').each(function(){ 
    var tr = $(this); 
    var checkbox = $(this).find('.big-checkbox').is(':checked'); 
    var itemcode = $(this).find('.dyn_item_code :selected').val(); 
    var amount = $(this).find('.dyn_amount').val(); 
    var reference = $(this).find('.dyn_reference').val(); 

    // For each row, create a item on the array, containing all important data for the row 
    my_table.push({checkbox, itemcode ,amount, reference})  
}); 

console.log("My table :", my_table) 
localStorage.setItem(mykey, JSON.stringify(my_table)); 

あなたのような各COL保存したくない場合は、次の

:{チェックボックス:真、itemcode:...「foo」を、}代わりに規則的な配列を持っている、あなたがして、新しい行を置き換えることができます
my_table.push([checkbox, itemcode ,amount, reference]) 
+0

はい、あなたは正しいです。もう1つの質問、アレイへのアクセス方法は? 'console.log(localStorage.getItem(mykey)[0]);'? –

+0

'JSON.parse()'を使って、localStrorageに保存された文字列(配列stringify)を配列に変換します。詳細はhttps://stackoverflow.com/questions/22991871/localstorage-save-array/22992002#22992002の古い回答を確認してください。 – Arthur

3

オブジェクトの配列を作成します。

var array = []; 
$('#dyn_table tr').each(function(){ 
    var tr = $(this); 
    var checkbox = $(this).find('.big-checkbox').is(':checked'); 
    var itemcode = $(this).find('.dyn_item_code :selected').val(); 
    var amount = $(this).find('.dyn_amount').val(); 
    var reference = $(this).find('.dyn_reference').val(); 

    array.push({ 
     checkbox: checkbox, 
     itemcode: itemcode, 
     amount: amount, 
     reference: reference 
    }); 

    console.log(checkbox); 
    console.log(itemcode); 
    console.log(amount); 
    console.log(reference); 
}); 

localStorage.setItem(mykey, JSON.stringify(array)); 
関連する問題