javascript - 如何将表上的新行添加到本地存储？

问题描述

我想在表中创建新行并希望能够将其保存在本地存储中，这样下次我重新加载页面时它就不会丢失。我已经尝试了一切，我不能这样做，请帮助！

如果有人可以帮助我，那就太好了。

<table id="table">
    <tr>
        <th class="lines">Company</th>
        <th class="lines">1</th>
        <th class="lines">2</th>
        <th class="lines">3</th>
        <th class="lines">4</th>
        <th class="lines">5</th>
        <th class="lines">6</th>
        <th class="lines">7</th>
        <th class="lines">8</th>
        <th class="lines">9</th>
        <th class="lines">10</th>
        <th class="lines">11</th>
        <th class="lines">12</th>
        <th class="lines">13</th>
        <th class="lines">14</th>
        <th class="lines">15</th>
        <th class="lines">16</th>
        <th class="lines">17</th>
        <th class="lines">18</th>
        <th class="lines">19</th>
        <th class="lines">20</th>
        <th class="lines">21</th>
        <th class="lines">22</th>
        <th class="lines">23</th>
        <th class="lines">24</th>
        <th class="lines">25</th>
        <th class="lines">26</th>
        <th class="lines">27</th>
        <th class="lines">28</th>
        <th class="lines">29</th>
        <th class="lines">30</th>
  </tr>


</table>



function AddNewCompanyToTable(){
  var X =  document.getElementById("AddingNewCompanyNameInput").value

  var table = document.getElementById("table");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = X;

// I dont have no idea after this
  v = cell1.innerHTML
  localStorage.setItem(v, cell1.innerHTML)

}

标签： javascripthtmlwebweb-applications

JSON.stringify我认为您可以使用and来存储您的表格或表格，例如数组或对象JSON.parse。

笔记：

数据结构如下：

[ // first level contains all rows
    [], // second level contains all columns
]

例子：

[
    [1,2,3,4,5,6,7,8,9,10], // first row
    [1,2,3,4,5,6,7,8,9,10], // last row
]

让我举个例子：

// to this example, we need emulate "localStorage"
let localData = {}
class EmulatedlocalStorage {
  static getItem (key) {
    return localData[key]
  }
  static setItem (key, value) {
    localData[key] = value;
  }
}

// add rows
const add = () => {
  let rows = get();
  rows.push([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
  return save(rows)
}

// save changes
const save = data => {
  EmulatedlocalStorage.setItem('table', JSON.stringify(data))
  return draw()
}

// get rows
const get = () => {
  let rows = EmulatedlocalStorage.getItem('table')
  if (!rows) {
    return []
  }
  return JSON.parse(rows)
}

// draw into table
const draw  = () => {
  let data = get()
  let element = document.querySelector('table')
  for (let tr of data) {
    let row = document.createElement('tr')
    for (let td of tr) {
      let cell = document.createElement('td')
      cell.appendChild(document.createTextNode(td))
      row.appendChild(cell)
    }
    element.appendChild(row)
  }
}

table {
  width:100%;
  border: 1px solid black;
}

table tr {
  border: 1px solid black;
}

table tr td {
  border: 1px solid black;
}

<html>
  <body>
    <button onclick="add()">Add Row</button>
    <div id="table">
      <table></table>
    </div>
  </body>
</html>

奖金：

如果要将退出表转换为数组，可以使用下一个示例代码：

function tableToArray(table) {
  var result  = [].reduce.call(table.rows, function (result, row) {
      result.push([].reduce.call(row.cells, function(res, cell) {
          res.push(cell.textContent);
          return res;
      }, []));
      return result;
  }, []);
  return result;
}


document.querySelector('pre').innerHTML = JSON.stringify(tableToArray(document.querySelector('table')), null, 4)

pre {
  border:1px solid red; 
  width:100%;
}
table {border:1px solid black;}

<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
</table>

<code><pre></pre></code>

短的：

tableToArray(element)

感谢：https ://stackoverflow.com/a/34349542/901197

javascript - 如何将表上的新行添加到本地存储？

问题描述

解决方案

推荐阅读