Javascript 联合收割机'；添加表'；和'；保存复制行'；在一个项目中

我有两把小提琴

• 在第一个（）中，我创建了一个新表并保存 进入本地存储

• 在第二个（）中，我创建了一个复制行功能 （选定行并将其复制到选定表中）

我的目标是将两个小提琴组合成一个，这样您就可以：

• 添加新表[可在JSFIDLE 1上获得]
• 添加表时，有一个“复制到表1”选项[可在JSFIDLE 2上获得]
• 可以选择行，然后使用该选项将其复制到所选表中。[可在JSFIDLE 2上获得]

---

我需要删除它，并用新的表功能替换它，使用code

$（'#table'+localStorage.Index）.dataTable（{…}）

---

我在这方面花了很多时间，但我有一些问题：

• 重新加载时，我无法再次选择行
• 无法复制行

我的工作小提琴[更新2]：

var mainTable=$（“#mainTable”）.dataTable({
“bStateSave”：正确，
“国家拯救”：没错，
“bPaginate”：错误，
“bLengthChange”：false，
“bFilter”：错误，
“bInfo”：假，
“bAutoWidth”：假
});
/*选择选项*/
mainTable.on（'click'，'tr'，function（）{
var$row=$（此），
isSelected=$row.hasClass（'selected'））
$row.toggleClass（'选定的'）
.find（':checkbox'）.prop（'checked'，！isSelected）；
});
$（“#copyToTable1，#copyToTable2”）。在（'单击'，函数（）上{
设$elem=$（this）；
变量表=$（“#表”+$elem.attr（'id'）。替换（/[a-zA-Z]/ig'）；
var tbl_id=table.attr（'id'）；
var$row=mainTable.find（“.selected”）；
如果（！$row.length）{
log（'必须先选择一些要复制的行'）；
返回；
}否则{
var r=确认（“复制到表”+tbl_id+”？”；
var table_to_copy=table.dataTable（）；
如果（r==true）{
复制行（主表、表到表的副本）；
console.log（“复制！”）；
setTimeout（'console.clear（）'，2000）；
}
}
});
函数copyRows（fromTable，toTable）{
var$row=fromTable.find（“.selected”），
storageName='dataSet\'+toTable.attr（'id'），//添加了此行
dataSet=localStorage.getItem（storageName）？JSON.parse（localStorage.getItem（storageName））：[]；//添加了此行
$。每个（$行，函数（k，v）{
如果（此！==null）{
addRow=fromTable.fnGetData（此）；
toTable.fnAddData（addRow）；
dataSet.push（addRow）；//添加了此行
}
});
localStorage.setItem（storageName，JSON.stringify（dataSet））；//添加了此行
}
/*创建桌面设备*/
$（'.submitButton'）。单击（函数（）{
函数getTableList（）{
var addTable='copyToTable'+localStorage.Index+''+
'' +
'' +
'' +
'' +
'' +
“观众姓名”+
“类型”+
'' +
'' +
'' +
'' +
'';
返回addTable；
}
如果（真）{
/**增量ID的索引**/
if（类型（存储）！=“未定义”）{
if（localStorage.Index）{
localStorage.Index=Number（localStorage.Index）+1；
}否则{
localStorage.Index=1；
}
}//如果存储
var resultTable=JSON.parse（localStorage.getItem（“tableList”）；
if（resultable==null）{
可结果=[]；
}
让newtableHTML=getTableList（）；
可结果推送({
表：newtableHTML
});
//保存新的resultFolder数组
setItem（“tableList”，JSON.stringify（resultable））；
/*附加表baru*/
$（'.tab content'）.append（newtableHTML）；
var newTable=$（“#表”+localStorage.Index）.dataTable({
“data”：localStorage.getItem（'dataSet\u table'+localStorage.Index）？JSON.parse（localStorage.getItem（'dataSet\u table'+localStorage.Index））：[]，//在此处更改
“bStateSave”：正确，
“国家拯救”：没错，
“bPaginate”：错误，
“bLengthChange”：false，
“bFilter”：错误，
“bInfo”：假，
“bAutoWidth”：假
});
警报（“成功创建表”）；
}否则{
警报（“创建表失败”）；
}
}); // 提交按钮功能
//在init上填写表格内容
$（文档）.ready（函数（）{
var resultTable=JSON.parse（localStorage.getItem（“tableList”）；
if（可结果！=null）{
//在DOM中获取导航引用
设tableContent=$（“.tab内容”）；
//清除html内容
html（“”）；
for（var i=0；i

默认表
观众姓名
类型
加尔文
相像
好的，我使用代码2作为起点，将代码1与代码2合并

见工作示例：


首先，我们需要在页面加载时检查本地存储，然后，如果存在，则在页面上打印表

$(document).ready(function(){
        var localtbl = localStorage.getItem('tableList');

    var resultTable = [];
    if(localtbl !== undefined && localtbl !== ''){
    resultTable = JSON.parse(localtbl);
    }
        $.each(resultTable, function(i,v){
                $('#table1_wrapper').append(v.table);

    $('table[id^="table'+(i+2)+'"]').dataTable({
      "data": localStorage.getItem('dataSet_table' + (i+2)) ? JSON.parse(localStorage.getItem('dataSet_table' + (i+2))) : [], //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
    });

      })
})

然后，我们需要复制代码1以添加新表，并进行一些更改

/* CREATE TABLE FITURE */
$('.submitButton').click(function() {

  var tblcount = ($('table[id^="table"]').length + 1);

    var addTable = '<br><button class="btn btn-success" id="copyToTable'+tblcount+'"> Copy To Table '+(tblcount)+'</button>' +
    '<h3 style="color:red;">Table '+(tblcount)+'</h3>' +
      '<table id="table'+tblcount+'" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>';
    var getTbl = localStorage.getItem("tableList");
    var resultTable = [];
    if(getTbl !== undefined && getTbl !== ''){
    resultTable = JSON.parse(getTbl);
    }
    let newtableHTML = addTable;
    resultTable.push({
      table: newtableHTML
    });
    // save the new resultFolder array
    localStorage.setItem("tableList", JSON.stringify(resultTable));

  //console.log(tblcount);
  $('#table' + (tblcount-1) + '_wrapper').after(addTable);

  $('#table' + (tblcount)).dataTable({
    "data": localStorage.getItem('dataSet_table' + tblcount) ? JSON.parse(localStorage.getItem('dataSet_table' + tblcount)) : [], //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
  });


}); // submitButton func

这似乎是“为我写代码”之类的问题。如果你把问题孤立起来，转而询问这个问题，你就有更好的机会得到一个好的答案。但是我不能合并它，这是我解决它的最后一个任务。你能解释一下这个代码
id^
的要点吗<代码>'button[id^=“copyToTable”]'/* CREATE TABLE FITURE */
$('.submitButton').click(function() {

  var tblcount = ($('table[id^="table"]').length + 1);

    var addTable = '<br><button class="btn btn-success" id="copyToTable'+tblcount+'"> Copy To Table '+(tblcount)+'</button>' +
    '<h3 style="color:red;">Table '+(tblcount)+'</h3>' +
      '<table id="table'+tblcount+'" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>';
    var getTbl = localStorage.getItem("tableList");
    var resultTable = [];
    if(getTbl !== undefined && getTbl !== ''){
    resultTable = JSON.parse(getTbl);
    }
    let newtableHTML = addTable;
    resultTable.push({
      table: newtableHTML
    });
    // save the new resultFolder array
    localStorage.setItem("tableList", JSON.stringify(resultTable));

  //console.log(tblcount);
  $('#table' + (tblcount-1) + '_wrapper').after(addTable);

  $('#table' + (tblcount)).dataTable({
    "data": localStorage.getItem('dataSet_table' + tblcount) ? JSON.parse(localStorage.getItem('dataSet_table' + tblcount)) : [], //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
  });


}); // submitButton func

$('body').on('click', 'button[id^="copyToTable"]', 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);
    }
  }
})