在应用程序脚本中动态添加表格行答案

【问题标题】：Add table row dynamically in apps script在应用程序脚本中动态添加表格行
【发布时间】：2017-11-15 00:38:15
【问题描述】：

我有一个有两行的表：第一行是标题，第二行是这样的......

<tr>
      <td><b>1</b></td>
      <td><input type="date" id="dt" name="dt"></td>
      <td><input type="time" id="tmStart" name="tmStart"></td>
      <td><input type="time" id="tmEnd" name="tmEnd"></td>
      <td><select id="ddlTrainType" name="ddlTrainType"><option>Select Training</option></select></td>
      <td><input type="text" id="txtLoc" name="txtLoc"></td>
      <td><select id="ddlProg" name="ddlProg"><option>Select Program</option></select></td>
      <td><select id="ddlTrainMod" name="ddlTrainMod"><option>Select Module</option></select></td>
      <td><select id="ddlTrainName" name="ddlTrainName"><option>Select Trainer</option></select></td>
      <td><select id="ddlStat" name="ddlStat"><option>Pending</option><option>Completed</option><option>Cancelled</option></select></td>
</tr>

注意：所有选择标签下拉菜单都是从另一个谷歌电子表格填充的。

现在，在单击按钮时（像 add row 之类的按钮），我想在此表中添加与上面类似的行。

不仅添加一行，最后，假设总共有5行，点击提交，那么我想将所有5行存储在Google电子表格中。

任何想法如何做到这一点？

我已经尝试在 code.gs 文件的帮助下添加行并使用 HtmlService.createTemplate 重构模板。但这只能在doGet(e)中使用，我猜不能与js按钮动作一起使用。

假设我们创建了这样一个动态表，但即使在这之后，我们如何将所有表数据从 javascript 传递到 code.gs 文件？

【问题讨论】：

标签： javascript jquery html google-apps-script

【解决方案1】：

好的，经过严格的谷歌搜索和测试这么多场景后，我自己想出了解决方案，希望有一天能对某人有所帮助。就是这样：

为了动态追加行，我使用了这个：

$('#trainingTable > tbody:last-child').append(newRow);

这里，#trainingTable 是我的桌子的 ID。 newRow 是这样的：

var newRow = '<tr id="rowToClone">'
      + '<td><b>'+ rowCount +'</b></td>'
      + '<td><input type="date" id="dt'+rowCount+'" name="dt'+rowCount+'"></td>'
      + '<td><input type="time" id="tmStart'+rowCount+'" name="tmStart'+rowCount+'"></td>'
      + '<td><input type="time" id="tmEnd'+rowCount+'" name="tmEnd'+rowCount+'"></td>'
      + '<td><select id="ddlTrainType'+rowCount+'" name="ddlTrainType'+rowCount+'"><option>Select Training</option></select></td>'
      + '<td><input type="text" id="txtLoc'+rowCount+'" name="txtLoc'+rowCount+'"></td>'
      + '<td><select id="ddlProg'+rowCount+'" name="ddlProg'+rowCount+'"><option>Select Program</option></select></td>'
      + '<td><select id="ddlTrainMod'+rowCount+'" name="ddlTrainMod'+rowCount+'"><option>Select Module</option></select></td>'
      + '<td><select id="ddlTrainName'+rowCount+'" name="ddlTrainName'+rowCount+'"><option>Select Trainer</option></select></td>'
      + '<td><select id="ddlStat'+rowCount+'" name="ddlStat'+rowCount+'"><option>Pending</option><option>Completed</option><option>Cancelled</option></select></td>'
      + '</tr>';

这里rowCount 用于唯一标识行。定义如下：

var rowCount = $('#trainingTable tr').length;

现在是从电子表格填充下拉列表的问题。为此，我只是使用了之前使用的相同功能，但这次我也通过了rowCount。

现在，我们的表格已正确创建并且是完全动态的。现在，问题是将最新的表格数据传递给 gs 文件。为此，我使用了以下内容：

var entireForm = document.getElementById("MY_FORM_ID");
google.script.run.withSuccessHandler(showSuccess).GS_FUNCTION(entireForm);

现在，当我使用Logger.log 检查表单值时，我在 gs 文件端获得了表单的整个最新对象。至此，问题解决了！

【讨论】：