使用脚本将 HTML 网络应用程序 table 数据发送回 Google 表格

Question

我正在创建一个 Google HTML 网络应用程序，以允许多个用户进入并报告他们的信用卡费用。首先，我将原始数据报告粘贴到 Google 传播 sheet，然后启动 HTML 网络应用程序，在 HTML table 中显示用户交易。我还在最后一列中添加了下拉框，以允许用户 select 每笔交易的费用类型。

我需要帮助弄清楚如何将用户 select 的数据从下拉列表发送回 google sheet。我希望在用户单击提交按钮时发回此信息。

这是我目前的情况：

index.html

 <? 
  var ss = SpreadsheetApp.openById('myID');
  var HomeSheet = ss.getSheetByName('Home');
  var StoreNum = HomeSheet.getRange(5, 2).getValue();
  var StoreSheet = ss.getSheetByName(StoreNum);
  var data = StoreSheet.getRange('A7:I' + lastRow('A',StoreNum)).getValues();
 ?>
<h2>Location: <?= StoreNum ?></h2>

<button onclick='buttonFunction()'>Submit</button>

<body style='background-color:#cccccc'>
  <table class='myTable' border='1'>
    <th align='center'>Settlement Date</th>
    <th align='center'>Purchase Date</th>
    <th align='center'>Purchase Time</th>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td align='center'>
            <?= data[i][j] ?>
            </td>     
          <? } ?>
            <td align='center'>
              <form>
                <select>
                  <option value="Select Type">Select Type</option>
                  <option value="Food">Food</option>
                  <option value="M&R">M&R</option>
                  <option value="Office Sup">Office Sup</option>
                  <option value="Other">Other</option>
                </select>
              </form>
            </td>  
        </tr>
      <? }?>
  </table>
</body>

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
}

function include(file) {
  return HtmlService.createHtmlOutputFromFile(file).getContent();
}        

function submitRequest() {
  var table = document.getElementsByClassName('myTable')[0];
  var tableRow = table.rows[1][8];
  var tableContent = tableRow.firstChild.textContent;
  StoreSheet.getRange('D15:D18').setValues(tableContent)
}

我尝试执行从某处找到的上述功能，但出现 "document not defined" 错误。我很确定这是因为 document.getElementsByTagName 需要在 HTML 文件的 <script> 中调用，但我不确定从这里去哪里，我已经成功了将 Google sheet 数据输入 HTML 而不是倒退。

这是 table 的图像，如果它有助于可视化....我不确定我应该通过 table 还是通过下拉框元素获取数据.

编辑：确认工作

（Juan Diego 的回答）index.html 上面的文件

Code.gs:

function setValue(value) {
  var ss = SpreadsheetApp.openById('myID');
  var HomeSheet = ss.getSheetByName('Home');
  var StoreNum = HomeSheet.getRange(5, 2).getValue();
  var StoreSheet = ss.getSheetByName(StoreNum);

  StoreSheet.getRange('E1').setValue(value)
}

script.html

<script>

function onSuccess() {
  alert('Your request has ben submitted');
}

function buttonFunction() {
  var Row = document.getElementById("tablerow");
  var Cells = Row.getElementsByTagName("td");
  var cellvalue = (Cells[0].innerText);

  google.script.run.withSuccessHandler(onSuccess).setValue(cellvalue);
}

</script>

Answer 1

submitRequest()应该在前端，后台回调函数发送HTML形式的数据

检查这个 Whosebug post：How to submit HTML form into a Sheet?

Google 文档 Class google.script.run

这里的想法是在前端有这个功能：

<script>
function submitRequest(){
 google.script.run.withSuccessHandler(success).[YOUR_BACKEND_FUNCTION]([YOUR_FORM_VALUES]);
}
</script>

Tha 会在后端给你一个你可以处理的对象

使用脚本将 HTML 网络应用程序 table 数据发送回 Google 表格

Send HTML web app table data back to Google Sheets using Scripts

html

javascript

dom

google-apps

google-apps-script

index.html

Code.gs

编辑：确认工作