2017-09-30 2 views
0

각 테이블 행과 해당 입력 (확인란, 텍스트, 선택)을 localstorage에 저장할 배열로 가져 오는 방법은 무엇입니까? 대부분의 코드를 완성했습니다. 빌드해야 할 부분은 ???? 부품. 감사.javascript 여러 배열을 json으로

이 자바 스크립트 코드입니다 : 당신은 내가 동적 테이블 행을 생성하는 방법을 궁금해하는 경우

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

네 말이 맞아요. 한 가지 더 질문합니다. 배열에 액세스하는 방법은 무엇입니까? '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)); 
관련 문제