Google Apps Script提取HTML动态表格值写入指定Sheet问题求助

场景背景 #

• 正在开发面向工作场景的Google Sheets自动化工具，通过公式+脚本实现特定任务自动化
• 当前流程：用户点击按钮后调用getUi()方法打开Modal Dialog模态弹窗
• 核心难点：提取用户在弹窗内HTML表格中输入的所有数据

触发弹窗的GS参考代码 #

function openbrief() {
  //pull necessary values
  var supp_main = SpreadsheetApp.getActive().getSheetByName('supp_main')

  //projects
  var projrng = supp_main.getRange(2, 64, 1000);
  var projval = projrng.getValues();
  var projname = projval.filter(String)
  
  //content_category
  var catrng = supp_main.getRange(2, 65, 1000);
  var catval = catrng.getValues();
  var catname = catval.filter(String)

  //content_type
  var typerng = supp_main.getRange(2, 66, 1000);
  var typeval = typerng.getValues();
  var typename = typeval.filter(String)

  //format
  var formatrng = supp_main.getRange(2, 67, 1000);
  var formatval = formatrng.getValues();
  var formatname = formatval.filter(String)
  
  //channel
  var chanrng = supp_main.getRange(2, 68, 1000);
  var chanval = chanrng.getValues();
  var channame = chanval.filter(String)


  var widget = HtmlService.createTemplateFromFile('briefs');
  widget.projdata = projname.reduce((s, [e]) => s += `<option value="${e}">${e}</option>\n`, "");
  widget.catdata = catname.reduce((s, [e]) => s += `<option value="${e}">${e}</option>\n`, ""); 
  widget.typedata = typename.reduce((s, [e]) => s += `<option value="${e}">${e}</option>\n`, "");
  widget.formatdata = formatname.reduce((s, [e]) => s += `<option value="${e}">${e}</option>\n`, ""); 
  widget.chandata = channame.reduce((s, [e]) => s += `<option value="${e}">${e}</option>\n`, "");
  SpreadsheetApp.getUi().showModalDialog(widget.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(5000).setWidth(5000), 'Briefs');

}

待排查问题 #

1. HTML内编写的JS脚本预期遍历所有表格值、推入数组后写入Google工作表，但功能未正常运行，因对JS中的for loops与arrays用法不够熟练，无法定位故障原因
2. 现有脚本是否可以正确提取下拉菜单的选中值？目前怀疑无法提取，下拉控件视觉上悬浮在单元格上层
3. 欢迎基于现有代码、实现效果提出各类优化改进建议

现有HTML代码 #

<table id="brief_table">
      <thead>
          <tr>
              <th>Content category</th>
              <th>Description</th>
              <th>Content type</th>
              <th>Format</th>
              <th>Channel</th>
              <th>Assets</th>
              <th>Start date</th>
              <th>End date</th>
              <th>Relevant links</th>
              <th>Comments</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                <select id="catname" style="Border: none;"><?!= catdata ?></select>
              </td>
              <td contenteditable='true'>Test</td>
              <td>
                <select id="typename" style="Border: none;"><?!= typedata ?></select>
              </td>
              <td>
                <select id="formatname" style="Border: none;"><?!= formatdata ?></select>
              </td>
              <td>
                <select id="channame" style="Border: none;"><?!= chandata ?></select>
              </td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
          </tr>
      </tbody>
</table>

<script>
function pasteBrief() {
  var table = document.getElementById("brief_table");
  var tablevalues = [];

  for (var r = 0, n = table.rows.length; r < n; r++) {
          for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
              tablevalues.push(table.rows[r].cells[c].innerHTML);
          }
      }

  alert(tablevalues);
  google.script.run.pasteBriefVal(tablevalues);
}
</script>

现有GS服务端写入代码 #

function pasteBriefVal(tablevalues){
  SpreadsheetApp.getActive().getSheetByName('supp_main').getRange('bs1:cb').setValues(tablevalues);
}

已做调整 #

• 已将setValues逻辑从HTML文件移回GS服务端，在HTML中通过*google.script.run.pasteBriefVal(tablevalues)*调用GS端函数
• 已尝试将数组stringify后作为单个值写入单元格，用于查看数组结构
• 弹窗触发路径：进入「[SOW] #2-Project & deliverables」工作表，点击D24附近标注“PLAN”的图标即可打开对应弹窗

内容的提问来源于stack exchange，提问作者A. Prats