制作一个包含用于提交答案的表格的 Google 表单答案

【问题标题】：Making a Google Form which has a table for answer submission制作一个包含用于提交答案的表格的 Google 表单
【发布时间】：2014-11-03 12:02:50
【问题描述】：

我想用一个简单（实施起来成本低廉）的电子流程取代我工作场所的零件申请流程，该流程是使用 Google 表单启动的。问题是我希望用户能够输入多个部分（以及相关信息，例如所需数量、预订参考等），但我希望这样做而不必有多个重复的问题。

我对此进行了广泛的研究，但找不到任何符合要求的内容 - 我的想法是使用 Google Apps 脚本创建一个用户可以填写的表格。我发现的最接近的是这样的：Creating Form Elements Dynamically

原始纸质表格如下所示 - 我希望表格以类似的格式请求如下所示的信息：

提前致谢！

编辑！为了清楚起见，我很高兴考虑通过在线界面运行此流程的其他解决方案 - 我首先选择了 Google 表格/表单，因为它们已经很好地集成到我的公司中并且我有他们的经验（设置触发器等非常简单）

【问题讨论】：

@vimes1984 请详细说明您想对数据做什么。假设有人填写了上面的电子表格，数据应该如何处理？应该在某处提交吗？通过电子邮件发送？存储在数据库中？等等... 零件编号是否需要自动填充库存数据？库存是否保存在某个地方？您需要哪些数据字段？仅零件号、数量、预订参考和备注？此外，如果您发布自己的问题也会有所帮助。
IHMO 这个问题应该被关闭，因为可能会导致基于意见的答案。

标签： javascript forms google-apps-script google-forms

【解决方案1】：

我知道 OP 可能早就从这个问题上转移了。然而，我过去曾按照这些思路做过一些事情，并认为我会在社区中 share my approach。

我将首先假设 Google 表单只是用户使用表单构建器以编程方式生成的良好的纯 HTML 表单。因此，可以遍历 as-built 表单并提取提交位置和所有字段名称：

document.querySelectorAll('form').forEach((x) => {console.log(x.action)})```
document.querySelectorAll('[name^="entry."]').forEach((x) => {console.log(x.name + '=' + x.closest('[role="listitem"]').querySelector('[role="heading"]').innerText)})

上面的 sn-p 将使您了解组件是什么。

剩下的就是使用您选择的框架（我在 AngularJs 最流行的时候使用）构建一个满足您需求的前端，并根据您的需要将尽可能多的 UI 和验证合并到其中。

在这里，您可以灵活地将整个内容作为一个 JSON 提交，或者将其解析为单个字段并逐个提交条目，出于this demo 的目的，我选择了最简单的方法，但这肯定是有潜力。

【讨论】：