Question

我正在制作一个包含表格的电子应用，用户可以添加表格并更改字段的内容，但我希望保存输入，并且只有当用户在其中输入任何内容时才能保存。

我该怎么做？我需要一个数据库吗？可以用饼干吗？我试图学习如何使用cookie，但还没有找到如何保存添加的元素以及内容。

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>

Answer 1

你要如何保存它取决于你想做什么。如果您希望它在程序退出后保留，则需要将其保存在磁盘或服务器上。不过，您可能只想将其保存到文件中。（JSON是最明显的选择）。否则，只需将其保存到js变量中。

要获取数据，我要么使用保存按钮来读取单元格的文本，要么使用数据绑定。以后对Electron应用非常有用。您可以使用框架（例如vue.js，react.js或更多）或DIY。

前者可能更容易，你会想要一个按钮将它保存到磁盘上。点击该按钮，您可以浏览所有<tr> - 元素并获取其值并保存。

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>

用户

1 个答案: