html格式的可编辑表格，所做的更改也将保存在电子表格中

Question

我已经创建了一个使用谷歌应用程序脚本的网站。在我的网站上，我有一个表格，但这些值来自我的电子表格。

不幸的是，现在我有了一个可编辑的表，一旦我更改了行中的值，并触发了自动刷新，它就会恢复正常，并从电子表格中获得原始值。有没有一种方法，一旦我做了一些更改，它也会在电子表格中更改，这样当自动刷新触发时，它将是相同的？这有可能吗？

​

<script>

document.addEventListener("DOMContentLoaded",function(){

  google.script.run.withSuccessHandler(generateTable).getOnline();
  google.script.run.withSuccessHandler(generateTable1).getStatus();
  
  setInterval(() => {
    document.getElementById("tablebody").innerHTML = "";
    document.getElementById("tablebody1").innerHTML = "";
    google.script.run.withSuccessHandler(generateTable).getOnline();
    google.script.run.withSuccessHandler(generateTable1).getStatus();
    google.script.run.withSuccessHandler(getOnline).generateTable();
    google.script.run.withSuccessHandler(getStatus).generateTable1();
  }, 20000); // run the function every 5 seconds
  

});

function generateTable(dataArray){

  var tbody = document.getElementById("tablebody");
  var tbody1 = document.getElementById("tablebody").innerHTML;
  
  dataArray.forEach(function(r){
  var row = document.createElement("tr");
  var col1 = document.createElement("td");
  col1.textContent = r[0];
  var col2 = document.createElement("td");
  col2.textContent = r[1];
  var col3 = document.createElement("td");
  col3.textContent = r[2];

  row.appendChild(col1);
  row.appendChild(col2);
  row.appendChild(col3);

  tbody.appendChild(row);

$(function(){
  $("td").click(function(event){
    if($(this).children("input").length > 0)
          return false;

    var tdObj = $(this);
    var preText = tdObj.html();
    var inputObj = $("<input type='text' />");
    tdObj.html("");

    inputObj.width(tdObj.width())
            .height(tdObj.height())
            .css({border:"0px",fontSize:"17px"})
            .val(preText)
            .appendTo(tdObj)
            .trigger("focus")
            .trigger("select");

    inputObj.keyup(function(event){
      if(13 == event.which) { // press ENTER-key
        var text = $(this).val();
        tdObj.html(text);
      }
      else if(27 == event.which) {  // press ESC-key
        tdObj.html(preText);
      }
    });

    inputObj.click(function(){
      return false;
    });
  });
});
});
 
}
</script>

<table>
      <tr>
        <th>Timestamp & Current TimeZone</th>        
        <th>Name</th>
        <th>EID</th>
      </tr>
     <tbody id="tablebody">         
    </table>  

​

以下是我在.gs上的代码

function getOnline(){

var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("UserLogins");
var data = ws.getRange(3, 1, ws.getLastRow()-1,3).getValues();
Logger.log(data);
return data;    

}

Answer 1

我不确定您的用例，但是可以嵌入一个可编辑的电子表格(see how here)。

如果您真的想自己使用HTML + JavaScript来实现这一点，我的方法是：

1. 在后端保留一个你所知道的版本。而另一个局部的变化，则是在不同的data structures.
2. Use函数范式中生成表格。特别的反应式框架(React，Vue.js等)会简化你的工作。
3. 当“应用”更改时，不要手动修改后端数据representation.
4. It应该保留为服务器发送给你的数据。只需发送请求，它将自动更新。当服务器发送您在本地进行的更改时，将其从本地更改中删除。这将合并更改。

此外，您还需要决定在编辑单元格时更新单元格时会发生什么情况。

下面是一个在单个文本输入上使用vanilla JS的示例，它可以给你一个想法(很多想法可以通过一个反应式框架来处理)：

​

const elements = {
  input: null,
  stateView: null
}

const backend = {
  input: 'value'
}
const local = {

}

function update() {
  // Update backend with the backend information. Usually means a fetch
  /* backend = ... */

  if (local.input === backend.input) {
    delete local.input
  }
  render()
}
function save() {
  // Send a request updating the backend
  
  // simulation
  backend.input = local.input
  update()
}

function localChange() {
  local.input = elements.input.value
  if (local.input === backend.input) {
    delete local.input
  }
  render()
}

function render() {
  input.value = 'input' in local ? local.input : backend.input
  
  let state = ''
  if ('input' in local) {
    state += `Local: "${local.input}"<br/>`
  }
  state += `Backend: "${backend.input}"<br/>`
  elements.stateView.innerHTML = state
}

// Setup events
document.addEventListener('DOMContentLoaded', function() {
  elements.input = document.getElementById('input')
  elements.input.addEventListener('keyup', localChange)
  elements.input.addEventListener('change', save)
  
  elements.stateView = document.getElementById('stateView')
  
  update()
})

<input id="input" type="text" placeholder="Add you data here">
<p id="stateView"></p>

​

请注意，在这种情况下，如果用户正在编辑，并且它是相同的，那么我将忽略本地状态。另外，因为我并不是真的在做请求，所以一切都是即时的。