javascript - 如何将行复制到数据表中并保存到本地存储？

Question

我正处于完成项目的最后步骤。

也许这是讨论我的项目的最后一个问题。但我有一些障碍:

1. I want to copy row from table1 to table2 and save the result row in the table2 into localStorage.

2. I have no idea to copy row from mainTable[table1] to table2 then save it to localStorage like my input form method ( JSFiddle 1 ).

我已经成功创建从输入表单保存行表并存储到本地存储，我希望复制行像这样创建行功能一样工作，可以保存到本地存储中。

var dataSet;
try {
  dataSet = JSON.parse(localStorage.getItem('dataSet')) || [];
} catch (err) {
  dataSet = [];
}
$('#myTable').dataTable({
  "data": [],
  "columns": [{
    "title": "First Name"
  }, {
    "title": "Last Name"
  }, {
    "title": "Action"
  }],
  "bStateSave": true,
  "stateSave": true,
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": false,
  "bInfo": false,
  "bAutoWidth": false
});
oTable = $('#myTable').DataTable();
for (var i = 0; i < dataSet.length; i++) {
  oTable.row.add(dataSet[i]).draw();
}

$('#Save').click(function() {
    var data = [
      $('#first').val(),
      $('#last').val(),
      "<button class='delete'>Delete</button>"
    ];
    oTable.row.add(data).draw();
    dataSet.push(data);
    localStorage.setItem('dataSet', JSON.stringify(dataSet));

});

JSFiddle 1 :创建行并保存到本地存储

<强> JSFiddle 2 : 复制行并将行保存到 localStorage [我在这里工作]

有人可以帮助我吗？

如果你觉得我懒。我很欣赏这一点，因为我还不太能够制作一个函数，而这是我在编程中的新事物。但我总是寻找引用资料，为了巩固它，我需要来这里。

如果我的问题有误，请纠正我。

Answer 1

您可以像工作示例一样进行操作。在copyRows函数中将复制的行推送到dataSet数组，然后将该数组保存到localStorage。并将table2的数据设置为dataSet。最初还从 localStorage 读取保存的 dataSet。

更新:您必须为不同的表使用不同的 localStorage 项。这里我使用dataSet_tableid格式将数据保存在localStorage中。

这是修改后的 JS。

var mainTable = $('#table1').dataTable({
    "bStateSave": true,
    "stateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false
});

/*SELECT OPTION */
mainTable.on('click', 'tbody tr', function () {
    $(this).toggleClass('selected');
});

$('#copyToTable2,#copyToTable3').on('click', function () {
    let $elem = $(this);
    var table = $("#table" + $elem.attr('id').replace(/[a-zA-Z]/ig, ''));
    var tbl_id = table.attr('id');

    var $row = mainTable.find(".selected");
    if (!$row.length) {
        console.log('You must select some rows to copy first');
        return;
    } else {
        var r = confirm("Copy to table " + tbl_id + "?");
        var table_to_copy = table.dataTable();
        if (r == true) {
            copyRows(mainTable, table_to_copy);
            console.log("Copied!");
            setTimeout('console.clear()', 2000);
        }
    }
});

/* FROM HERE SAVE ROW ================*/

function copyRows(fromTable, toTable) {
    var $row = fromTable.find(".selected"),
      storageName = 'dataSet_' + toTable.attr('id'), //added this line 
      dataSet = localStorage.getItem(storageName) ? JSON.parse(localStorage.getItem(storageName)) : []; //added this line 

    $.each($row, function (k, v) {
        if (this !== null) {
            addRow = fromTable.fnGetData(this);
            toTable.fnAddData(addRow);
            dataSet.push(addRow); //added this line 
        }
    });

    localStorage.setItem(storageName, JSON.stringify(dataSet)); //added this line 
}

/* =============== TABLE 2 ================== */

$('#table2').dataTable({
    "data": localStorage.getItem('dataSet_table2') ? JSON.parse(localStorage.getItem('dataSet_table2')) : [], //changed here
    "columns": [{
        "title": "First Name"
    }, {
        "title": "Last Name"
    }, {
        "title": "Action"
    }],
    "bStateSave": true,
    "stateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false
});

$('#table3').dataTable({
    "data": localStorage.getItem('dataSet_table3') ? JSON.parse(localStorage.getItem('dataSet_table3')) : [], //changed here
    "columns": [{
        "title": "First Name"
    }, {
        "title": "Last Name"
    }, {
        "title": "Action"
    }],
    "bStateSave": true,
    "stateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false
});

<强> UPDATED FIDDLE