咨询：如何用Google API Scripts新版HTML服务实现动态HTML表单行

当然可以！Google Apps Script的新版HTML服务（HtmlService）完全能实现动态添加表单行的功能，比旧的UI服务灵活太多了。下面是一套完整的可落地方案：

1. 前端HTML+JS实现动态行逻辑 #

先创建一个名为Index.html的文件，包含表单容器、添加按钮，以及动态添加行的JavaScript逻辑：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .form-row {
        display: flex;
        gap: 10px;
        margin: 10px 0;
        align-items: center;
      }
      .form-row input {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      button {
        padding: 8px 16px;
        background: #4285F4;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      .remove-btn {
        background: #EA4335;
      }
    </style>
  </head>
  <body>
    <h3>动态表单示例</h3>
    <div id="form-container">
      <!-- 初始表单行 -->
      <div class="form-row">
        <input type="text" name="items[][product]" placeholder="产品名称">
        <input type="number" name="items[][quantity]" placeholder="数量" min="1">
        <button class="remove-btn" onclick="removeRow(this)">删除</button>
      </div>
    </div>
    <button onclick="addRow()">添加新行</button>
    <br><br>
    <button onclick="submitForm()">提交表单</button>

    <script>
      // 添加新表单行
      function addRow() {
        const container = document.getElementById('form-container');
        const newRow = document.createElement('div');
        newRow.className = 'form-row';
        newRow.innerHTML = `
          <input type="text" name="items[][product]" placeholder="产品名称">
          <input type="number" name="items[][quantity]" placeholder="数量" min="1">
          <button class="remove-btn" onclick="removeRow(this)">删除</button>
        `;
        container.appendChild(newRow);
      }

      // 删除表单行
      function removeRow(btn) {
        btn.parentElement.remove();
      }

      // 提交表单数据到后端
      function submitForm() {
        const formData = new FormData(document.getElementById('form-container').parentNode);
        google.script.run
          .withSuccessHandler(() => {
            alert('提交成功！');
            // 重置表单
            document.getElementById('form-container').innerHTML = `
              <div class="form-row">
                <input type="text" name="items[][product]" placeholder="产品名称">
                <input type="number" name="items[][quantity]" placeholder="数量" min="1">
                <button class="remove-btn" onclick="removeRow(this)">删除</button>
              </div>
            `;
          })
          .withFailureHandler(error => {
            alert('提交失败：' + error.message);
          })
          .processForm(Object.fromEntries(formData));
      }
    </script>
  </body>
</html>

2. 后端Google Apps Script处理逻辑 #

创建一个名为Code.gs的文件，负责返回HTML页面和处理表单提交：

// 加载HTML页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('动态表单示例')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME); // 新版默认就是IFRAME，可省略，但写出来更清晰
}

// 处理表单提交数据
function processForm(formData) {
  // 这里可以把数据写入Google表格，或者做其他处理
  const ss = SpreadsheetApp.openById('你的表格ID'); // 替换成你的表格ID
  const sheet = ss.getSheetByName('表单数据'); // 替换成你的工作表名称
  
  // 遍历动态行数据，写入表格
  const items = formData.items;
  items.forEach(item => {
    sheet.appendRow([item.product, item.quantity]);
  });
  
  return 'success';
}

关键注意事项 #

• 动态元素命名：使用items[][product]这种数组式的name属性，能让FormData自动把多行数据整理成数组，后端接收更方便
• google.script.run：这是新版HTML服务和后端通信的核心方法，支持异步调用，还能设置成功/失败回调
• 权限问题：部署脚本时要选择合适的权限级别（比如“仅限域内用户”在G Suite环境下，或者“任何人，甚至匿名”如果需要公开访问）
• XSS防护：HtmlService默认会自动转义不安全的内容，不用担心前端注入问题

这样就能实现和旧UI服务类似的动态表单功能，而且扩展性更强，你可以根据需求自定义表单字段的类型、样式，甚至添加更复杂的验证逻辑。

内容的提问来源于stack exchange，提问作者mathsbeauty