JavaScript Save Table Rows added by User

Question

I am making an Electron app that has tables, the user can add a table and change the content of the fields, but I want the input to be saved, and only if the user entered anything into them.

How would I do this? Do I need a database? Can it be done with cookies? I have tried to learn how to use cookies but have not found how to save an added element as well as the content.

function appendRow(id) {
  var table = document.getElementById(id); // table reference
  length = table.length,
  row = table.insertRow(table.rows.length);      // append table row
  var i;
  // insert table cells to the new row
  for (i = 0; i < table.rows[0].cells.length; i++) {
      createCell(row.insertCell(i), i, 'row');
  }
}

function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
      txt = document.createTextNode('_'); // create text node
  div.appendChild(txt);               // append text node to the DIV
  div.setAttribute('id', style);        // set DIV class attribute
  div.setAttribute('idName', style);    // set DIV class attribute for IE (?!)
  cell.appendChild(div);                   // append DIV to the table cell
}

table {
  text-align: center;
  width: 400px;
}
tr:nth-child(even) {
  background-color: #ccc;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <button id="addCust" class="addSort" onclick="appendRow('custList')">add customer</button>
  <table id="custListTop" contenteditable="false" style="background-color: #ccc;">
    <tr>
      <td style="border-top-left-radius: 5px;">Customers</td>
      <td style="border-top-right-radius: 5px;">Main Location</td>
    </tr>
  </table>
  <table id="custList" contenteditable="true">
    <tr>
      <td>Someone</td>
      <td>something</td>
    </tr>
  </table>
<script src="test.js"></script>

</body>

</html>

score 2 · Accepted Answer · answered Nov 10 '17 at 22:52

Well how you are going to save it depends on what you want to do. If you want it to persist after your program was exited, you will need to save it on the disk or on a server somehow. You probably just want to save it into a file, though. (JSON is the most obvious choice). Otherwise, just save it into a js variable.

To get the data, I would either use a save button that reads the text of your cells, or use databinding. Later is very useful for Electron apps. You can either use a framework (like vue.js, react.js or many more) or DIY.

Former is probably easier and you will want a button to save it to the disk anyways. On the click of the button you can just go through all <tr>-elements and get their values and save them.

function save(id) {
  var table = document.getElementById(id);
  var trs = table.getElementsByTagName('tr');  // list of all rows
  
  var values = [];  // will be a (potentially jagged) 2D array of all values
  for (var i = 0; i < trs.length; i++) {
    // loop through all rows, each will be one entrie in values
    var trValues = [];
    var tds = trs[i].getElementsByTagName('td');  // list of all cells in this row
    
    for (var j = 0; j < tds.length; j++) {
      trValues[j] = tds[j].innerText;
      // get the value of the cell (preserve newlines, if you don't want that use .textContent)
    }
    
    values[i] = trValues;
  }
  // save values
  console.log(values);
}

function appendRow(id) {
  var table = document.getElementById(id); // table reference
  length = table.length,
  row = table.insertRow(table.rows.length);      // append table row
  var i;
  // insert table cells to the new row
  for (i = 0; i < table.rows[0].cells.length; i++) {
      createCell(row.insertCell(i), i, 'row');
  }
}

function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
      txt = document.createTextNode('_'); // create text node
  div.appendChild(txt);               // append text node to the DIV
  div.setAttribute('id', style);        // set DIV class attribute
  div.setAttribute('idName', style);    // set DIV class attribute for IE (?!)
  cell.appendChild(div);                   // append DIV to the table cell
}

table {
  text-align: center;
  width: 400px;
}
tr:nth-child(even) {
  background-color: #ccc;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <button id="addCust" class="addSort" onclick="appendRow('custList')">add customer</button>
  <button id="save" class="save" onclick="save('custList')">save</button>
  <table id="custListTop" contenteditable="false" style="background-color: #ccc;">
    <tr>
      <td style="border-top-left-radius: 5px;">Customers</td>
      <td style="border-top-right-radius: 5px;">Main Location</td>
    </tr>
  </table>
  <table id="custList" contenteditable="true">
    <tr>
      <td>Someone</td>
      <td>something</td>
    </tr>
  </table>
<script src="test.js"></script>

</body>

</html>

JavaScript Save Table Rows added by User

1 Answers1