如何将HTML网页传递的多值数据完整写入Google Sheet（App Script实现）

问题核心是你没把多行table的input数据打包成数组提交，后端也未做遍历处理，只取了最后一个值。下面是具体解决步骤：

1. 前端调整：收集所有行数据 #

先把前端提交逻辑改成遍历table的每一行，把所有关联号码和对应操作打包成数组。假设你的table结构带.associatedNumber和.action类的input：

<table id="dataTable">
  <tr>
    <td><input type="text" class="associatedNumber"></td>
    <td><input type="text" class="action"></td>
  </tr>
  <!-- 动态新增的行 -->
</table>
<button onclick="submitForm()">提交</button>

修改提交函数：

function submitForm() {
  // 收集所有行的有效数据
  const rowData = [];
  document.querySelectorAll('#dataTable tr').forEach(row => {
    const num = row.querySelector('.associatedNumber').value.trim();
    const act = row.querySelector('.action').value.trim();
    if (num && act) { // 跳过空行
      rowData.push({number: num, action: act});
    }
  });

  // 收集其他表单字段（比如用户基本信息）
  const metaData = {
    username: document.getElementById('username').value,
    submitTime: new Date().toLocaleString()
  };

  // 把所有数据传给App Script
  google.script.run.withSuccessHandler(() => {
    alert('提交完成');
    // 这里可以重置表单
  }).saveToSheet({meta: metaData, rows: rowData});
}

2. App Script后端：遍历数组写入Sheet #

原来的代码只取了单个值，现在要遍历传入的rows数组，把每一行数据写入表格。

逐行写入（简单直观） #

function saveToSheet(formData) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('表单数据');
  const {meta, rows} = formData;

  // 遍历每一行数据，追加到Sheet
  rows.forEach(item => {
    sheet.appendRow([meta.username, meta.submitTime, item.number, item.action]);
  });
}

批量写入（更高效，适合大量数据） #

如果提交的行数较多，用setValues批量写入比逐行appendRow快很多：

function saveToSheet(formData) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('表单数据');
  const {meta, rows} = formData;

  // 构建二维数组（setValues要求的格式）
  const outputData = rows.map(item => [
    meta.username,
    meta.submitTime,
    item.number,
    item.action
  ]);

  // 获取要写入的起始位置
  const startRow = sheet.getLastRow() + 1;
  // 批量写入
  sheet.getRange(startRow, 1, outputData.length, outputData[0].length).setValues(outputData);
}

3. 排查要点 #

• 前端用console.log(rowData)确认是否收集到了所有行的数据
• App Script里用Logger.log(rows)查看传入的数组是否完整
• 确保前端的input类名/ID和JS里的选择器一致，避免漏收集数据

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