javascript多个数组转换成json

Question

如何将每个表格行及其各自的输入（复选框、文本、选择）放入一个数组中以存储在本地存储中？我已经完成了大部分代码，我需要构建的部分是 ????部分。谢谢。

这是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')" />

Answer 1

创建一个对象数组。

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

Answer 2

我不知道我是否理解您的问题，但这有效吗？

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

如果您不想像 {checkbox: true, itemcode: 'foo', ...} 一样保存每个列，但要使用有序数组，则可以将新行替换为：

my_table.push([checkbox, itemcode ,amount, reference])