本教程详细介绍了如何将包含动态添加行的html表单数据完整保存到google sheet。针对仅能保存首行数据的问题，核心解决方案是修改google apps script，利用`e.parameters`（复数形式）来捕获所有同名输入字段的值，并重构数据以适应多行写入。文章还涵盖了如何扩展以支持更多列，并强调了部署web app时的版本管理重要性。
在构建Web应用程序时，将前端HTML表单数据提交到后端存储（如Google Sheet）是一种常见需求。当HTML表单包含可动态添加的表格行时，传统的Google Apps Script处理方式可能只会捕获到第一个同名字段的值，导致多行数据丢失。本教程将深入探讨这一问题，并提供一个基于Google Apps Script的解决方案，确保所有表格行的数据都能被正确保存。
理解问题根源
最初的问题在于，当HTML表单中存在多个具有相同name属性的输入字段时（例如，多个Email和Name字段，每个表格行一个），Google Apps Script的doPost(e)函数通过e.parameter[header]访问数据时，只会获取到第一个匹配项的值。为了捕获所有同名字段的值，我们需要使用e.parameters[header]，它会返回一个包含所有匹配值的数组。
初始Google Apps Script配置
以下是原始的Google Apps Script doPost 函数示例，它旨在处理单行数据：
function doPost (e) { const lock = LockService.getScriptLock() lock.tryLock(10000) try { const doc = SpreadsheetApp.openById(scriptProp.getProperty('key')) const sheet = doc.getSheetByName(sheetName) const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0] const nextRow = sheet.getLastRow() + 1 // 问题所在：e.parameter[header] 仅获取第一个值 const newRow = headers.map(function(header) { return header === 'Date' ? new Date() : e.parameter[header] }) sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]) return ContentService .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow })) .setMimeType(ContentService.MimeType.JSON) } catch (e) { return ContentService .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e })) .setMimeType(ContentService.MimeType.JSON) } finally { lock.releaseLock() }}
解决方案：处理多行数据
为了解决上述问题，我们需要对doPost函数进行关键修改，使其能够识别并处理e.parameters返回的数组。修改后的脚本将遍历这些数组，将每行数据重构为一个独立的数组，最终形成一个二维数组，一次性写入Google Sheet。
立即学习“前端免费学习笔记（深入）”；
修改后的Google Apps Script代码：
function doPost (e) { const lock = LockService.getScriptLock() lock.tryLock(10000) try { const doc = SpreadsheetApp.openById(scriptProp.getProperty('key')) const sheet = doc.getSheetByName(sheetName) const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0] const nextRow = sheet.getLastRow() + 1 // 核心修改：使用 e.parameters 获取所有值，并重构数据 // 假设您的Google Sheet表头顺序为：Date, Email, Name const temp = headers.map(header => { // 如果是Date列，则生成当前日期，否则从e.parameters获取对应数据 return header === 'Date' ? new Date() : e.parameters[header]; }); // 根据temp数组重构为适合写入多行的二维数组 // temp[0] 对应 Date，temp[1] 对应 Email 数组，temp[2] 对应 Name 数组 const newRows = temp[1].map((email, i) => [temp[0], email, temp[2][i]]); // 使用 newRows.length 写入多行 sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows); return ContentService .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow })) .setMimeType(ContentService.MimeType.JSON) } catch (e) { return ContentService .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e })) .setMimeType(ContentService.MimeType.JSON) } finally { lock.releaseLock() }}
代码解析：
const temp = headers.map(…): 这一步遍历Google Sheet的表头。对于Date列，它会生成一个新的日期对象。对于其他列（如Email、Name），它会从e.parameters中获取所有同名字段的值，e.parameters[header]将返回一个数组。因此，temp数组将包含[new Date(), [’email1′, ’email2′, …], [‘name1’, ‘name2’, …]]这样的结构。const newRows = temp[1].map((email, i) => [temp[0], email, temp[2][i]]);: 这是将temp重构为二维数组的关键步骤。我们以temp[1]（即所有Email地址的数组）为基础进行映射。对于每个Email (email) 及其索引 (i)，我们创建一个新的行数组：[temp[0], email, temp[2][i]]。temp[0]是日期（所有行共享同一日期）。email是当前行的Email。temp[2][i]是当前行对应的Name。最终，newRows将是一个二维数组，每个子数组代表Google Sheet中的一行数据。sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows);:setValues()方法现在接收newRows这个二维数组，一次性写入多行数据。newRows.length指定了要写入的行数。newRows[0].length指定了要写入的列数。
重要注意事项：
表头顺序匹配： 上述修改假设您的Google Sheet表头顺序严格为 Date, Email, Name。如果顺序不同，您需要相应调整newRows的构建逻辑。HTML Input name属性： 确保您的HTML input 元素的name属性与Google Sheet的表头完全一致。例如：。
扩展支持更多列
如果您需要添加更多列（例如Address），只需进一步修改newRows的构建逻辑。
修改后的Google Apps Script代码（支持更多列）：
function doPost (e) { const lock = LockService.getScriptLock() lock.tryLock(10000) try { const doc = SpreadsheetApp.openById(scriptProp.getProperty('key')) const sheet = doc.getSheetByName(sheetName) const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0] const nextRow = sheet.getLastRow() + 1 const temp = headers.map(header => { return header === 'Date' ? new Date() : e.parameters[header]; }); // 动态处理更多列 // temp[0] 仍为 Date // temp[1] 为 Email 数组 // temp.slice(2) 则包含了 Name, Address 等后续列的数组 const newRows = temp[1].map((email, i) => [ temp[0], // Date email, // Email ...temp.slice(2).map(colData => colData[i]) // 动态添加 Name, Address 等列的数据 ]); sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows); return ContentService .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow })) .setMimeType(ContentService.MimeType.JSON) } catch (e) { return ContentService .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e })) .setMimeType(ContentService.MimeType.JSON) } finally { lock.releaseLock() }}
代码解析：
…temp.slice(2).map(colData => colData[i]):temp.slice(2)会从temp数组的第三个元素开始（即跳过Date和Email）创建一个新数组。这个新数组中的每个元素都是一个包含相应列所有数据的数组（例如，[‘name1’, ‘name2’], [‘address1’, ‘address2’]）。map(colData => colData[i])则遍历这些列数据数组，并为当前行 (i) 提取出对应列的值。… 展开运算符将这些提取出的值作为独立的元素添加到当前行数组中。
重要提示：
使用此扩展方案时，您的HTML表单和Google Sheet的表头都必须已经更新，以包含所有您希望保存的额外列。HTML中的动态行添加逻辑（如$(this).parents(‘table’).find(‘tbody’).append( $(this).parents(‘table’).find(‘tbody tr:last-child’).clone() );）需要确保新克隆的行中的input元素也带有正确的name属性。
HTML表单结构示例
为了使上述Apps Script正常工作，您的HTML表单需要确保每个可编辑的输入字段都具有name属性，且这些属性与Google Sheet的表头相匹配。
| Name | <!--Address | (如果需要更多列) -->+ | |
|---|---|---|---|
| <!-- | (如果需要更多列) --> | X |
部署Web App注意事项
每次修改Google Apps Script代码后，为了让更改生效，您必须重新部署Web App，并且通常建议部署为新版本。
在Apps Script编辑器中，点击“部署” -> “新建部署”。选择部署类型为“Web 应用”。填写描述（可选），确保“执行身份”设置为“我”（您的账号），“有权访问者”设置为“任何人”。点击“部署”。如果已有部署，选择“管理部署”，点击铅笔图标编辑现有部署，然后在“版本”下拉菜单中选择“新建版本”，然后点击“部署”。
这将确保您的Web App URL保持不变，但后端脚本已更新为最新版本。
总结
通过对Google Apps Script中的doPost函数进行细致的修改，特别是将e.parameter替换为e.parameters并重构数据，我们可以有效地将HTML表单中动态添加的多行数据完整地保存到Google Sheet。理解e.parameters的工作原理以及如何将扁平化的输入数据转换为适合写入Google Sheet的二维数组，是解决此类问题的关键。同时，确保HTML表单的name属性与Google Sheet的表头一致，并在每次脚本修改后正确部署Web App，是保证系统正常运行的重要环节。
以上就是将HTML表格多行数据保存到Google Sheet的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539869.html
微信扫一扫 
支付宝扫一扫 
