刷新时保存动态创建的表行

时间:2019-04-08 14:30:44

标签: javascript html css electron

在刷新时无法将动态添加的表行保留在HTML中时,应用程序成功地将信息存储在开发工具中的本地存储中,但没有保留在HTML中。

我已经尝试了许多无济于事的方法,包括使用电子IPC,以及通过其他电子模块将它们存储在appData中,但没有一个起作用。

HTML表格

<table class="ui-selectable" cellspacing="0px" id='tasksTable'>
      <thead>
        <tr id="taskHeading">

            <th id="taskID">#</th>

          <th id="taskSite">SITE</th>
          <th id="taskprofile">PRODUCT</th>
          <th id="taskSize">SIZE</th>
          <th id="taskProxy">PROFILE</th>
          <th id="taskStatus">STATUS</th>
          <th colspan="3" id="taskAction">ACTION</th>
        </tr>
      </thead>

JS

let taskInfo = { 
  id: '',
  keywords: '',
  size: '',
  color: '',
  category: '',
  profile: ''
}


const tasksJSON = localStorage.getItem('tasks', taskInfo)
if (tasksJSON !== null) {
  tasks = JSON.parse(tasksJSON)
}
//var tasksJSON = JSON.parse(localStorage.getItem('taskInfo'));



function createTaskID() {
  let text = "";
  let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567890123456789";

  for (var i = 0; i < 3; i++){
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  taskID = text

  return text;
}


document.querySelector('#add-button').addEventListener('click', function(e){


  let taskID = createTaskID()
  let keywordTask = document.querySelector('#keyword-input').value.toLowerCase().split('&')
  let sizeTask = document.querySelector('#size-input').value
  let colorTask = document.querySelector('#color-input').value.toLowerCase()
  let categoryTask = document.querySelector('#category-select').value
  let profileTask = document.querySelector('#profile-select').value


  taskInfo.id = taskID;
  taskInfo.keywords = keywordTask;
  taskInfo.size = sizeTask;
  taskInfo.color = colorTask;
  taskInfo.category = categoryTask;
  taskInfo.profile = profileTask;

  let x=document.getElementById('tasksTable').insertRow(1);
  x.id="newTask";
  x.setAttribute("style","background-color: #10121A;")


  let c0=x.insertCell(0);
  c0.id = "taskID"
  let c1=x.insertCell(1);
  let c2=x.insertCell(2);
  let c3=x.insertCell(3);
  let c4=x.insertCell(4);
  let c5=x.insertCell(5);
  c5.id="status"
  let c6=x.insertCell(6);


  c0.innerHTML= taskID;
  c1.innerHTML= 'Supreme';
  c2.innerHTML= keywordTask;
  c3.innerHTML= sizeTask;
  c4.innerHTML= 'personal';
  c5.innerHTML= 'Idle.';
  c6.innerHTML= '<td width="3%"><span style="color: white;"><i class="material-icons">play_arrow</i></span></td>';

  ipcRenderer.send('createWorker', taskInfo)


  localStorage.setItem('tasks', JSON.stringify(taskInfo))


})

0 个答案:

没有答案