如何通过App Script从HTML页面直接更新电子表格单元格值

以下是直接通过Apps Script搭建HTML可编辑界面、修改200+列Planning表的完整可运行方案：

步骤1：编写服务端代码（Code.gs） #

负责读取表格数据、接收前端的修改请求回写到电子表格，无需硬编码列名，直接通过行列索引定位适配任意列数。

// 替换为你自己的Planning表ID和对应Sheet名称
const SPREADSHEET_ID = '你的表格ID';
const SHEET_NAME = 'Planning';

// 加载HTML编辑页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('Planning表编辑工具')
    .setWidth(1800)
    .setHeight(900);
}

// 拉取Planning表全量数据
function getPlanningData() {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_NAME);
  return sheet.getDataRange().getValues();
}

// 回写指定单元格的值
function updateCell(rowIndex, colIndex, newValue) {
  try {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = ss.getSheetByName(SHEET_NAME);
    // 电子表格行列从1开始计数，前端索引从0开始，因此需要+1对齐
    sheet.getRange(rowIndex + 1, colIndex + 1).setValue(newValue);
    return {success: true};
  } catch (e) {
    return {success: false, error: e.message};
  }
}

步骤2：编写前端HTML页面（index.html） #

实现可编辑表格视图，自带滚动适配200+列的宽度需求，单元格失焦自动触发保存。

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    .table-container {
      width: 100%;
      height: 800px;
      overflow: auto;
    }
    table {
      border-collapse: collapse;
      min-width: 4000px; /* 可根据实际列宽调整总宽度 */
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      min-width: 150px;
    }
    th {
      background-color: #f2f2f2;
      position: sticky;
      top: 0;
    }
    td[contenteditable="true"]:focus {
      background-color: #fffbe6;
      outline: 2px solid #1a73e8;
    }
    .tip {
      margin: 10px 0;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="tip">点击单元格直接编辑，失去焦点自动保存</div>
  <div class="table-container">
    <table id="planningTable"></table>
  </div>

  <script>
    // 页面加载完成后拉取数据渲染表格
    document.addEventListener('DOMContentLoaded', () => {
      google.script.run
        .withSuccessHandler(renderTable)
        .getPlanningData();
    });

    // 渲染全量表格
    function renderTable(data) {
      const table = document.getElementById('planningTable');
      data.forEach((row, rowIndex) => {
        const tr = document.createElement('tr');
        row.forEach((cellValue, colIndex) => {
          const td = document.createElement('td');
          td.textContent = cellValue;
          td.contentEditable = true;
          // 失焦触发单元格更新
          td.addEventListener('blur', () => {
            const newValue = td.textContent;
            google.script.run
              .withSuccessHandler(res => {
                if (!res.success) alert('保存失败：' + res.error);
              })
              .updateCell(rowIndex, colIndex, newValue);
          });
          tr.appendChild(td);
        });
        table.appendChild(tr);
      });
    }
  </script>
</body>
</html>

优化提示 #

• 部署前先替换Code.gs中的表格ID和Sheet名称参数
• 如果需要表头不可编辑，渲染第一行时将contentEditable设为false即可
• 若表格行数也较多（超过100行），可额外增加分页逻辑，避免一次性渲染过多DOM导致页面卡顿
• 单单元格独立保存的逻辑避免了批量提交大量数据，200+列场景下也不会出现明显延迟

内容的提问来源于stack exchange，提问作者R S Kumar Yellapu