How to add new row on table to localstorage?

Question

I want to make new row to the table and want to be able to save it on local storage so it doesn't get lost next time I reload the page. I have tried everything and I can't just do it please help!!!

It would be nice if someone could help me.

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

}

Your question is a bit confusing, you want to add a new row to your HTML table and then store it on local storage? — Rafael Duarte, Aug 08 '19 at 17:15

Olaf Erlandsen · Accepted Answer · 2019-08-08T18:13:13.563

I think you can store you table or tables like an array or object with JSON.stringify and JSON.parse.

Note:

The structure of data is:

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

Example:

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

Let me show an example:

// 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>

Bonus:

If you wanna convert you exiting table to an array, you can use the next example code:

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>

short:

tableToArray(element)

Thanks to: https://stackoverflow.com/a/34349542/901197

score 0 · Answer 2 · answered Aug 08 '19 at 17:13

Try to parse the HTML value to a JSON object and then store it:

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;

  var jsonObj = { 'row': cell1.innerHTML };
  localStorage.setItem('row', JSON.stringify(jsonObj))

}

You can then use this code to retrieve the object : https://stackoverflow.com/a/2010948/7586354

score 0 · Answer 3 · answered Aug 08 '19 at 17:14

0

Easy way: Add Jquery and use append();

$( "#table" ).append( '"<tr>Your code</tr>"' );

answered Aug 08 '19 at 17:14

Luis jorquera

59
3

Thank you so much! – Siyar Aug 08 '19 at 20:32

How to add new row on table to localstorage?

3 Answers3