如何在Google Sheets新增记录后自动更新HTML表格？

核心问题 #

当前代码仅在页面首次加载时调用一次getData()获取数据，没有设置后续的自动更新机制，因此只有刷新页面才能看到新数据。同时，固定的数据范围可能导致新增行无法被获取。

具体修改方案 #

1. 调整Google Apps Script的数据获取范围（Code.gs）

将固定的单元格范围改为动态范围，确保新增的记录能被获取到：

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

//从Google Sheets获取数据并以数组形式返回
function getData() {
  var spreadSheetId = "sheetID"; //请修改此处
  var dataRange = "Sheet1!A2:C"; // 改为动态范围，获取A2到C列所有有数据的行

  var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  var values = range.values;
  return values;
}

//引入JavaScript和CSS文件
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

2. 添加定时刷新逻辑（JavaScript.html）

修改脚本，实现定时重新获取数据并更新表格，同时处理DataTable的重复初始化问题：

<script>
// 页面加载时首次加载数据
refreshTable();

// 设置定时刷新，每30秒更新一次（可根据需求调整毫秒数）
setInterval(refreshTable, 30000);

// 刷新表格的核心函数
function refreshTable() {
  google.script.run.withSuccessHandler(showData).getData();
}

// 更新表格数据
function showData(dataArray){
  // 销毁已存在的表格实例，避免重复初始化报错
  var existingTable = $('#data-table').DataTable();
  if (existingTable) {
    existingTable.destroy();
  }
  
  // 重新初始化表格并加载最新数据
  $('#data-table').DataTable({
    data: dataArray,
    columns: [
      {"title":"名字"},
      {"title":"姓氏"},
      {"title":"学生ID"},
    ]
  });
}
</script>

额外说明 #

• 定时刷新的间隔（30000毫秒=30秒）可根据实际需求调整，比如改成10秒（10000）或1分钟（60000）。
• 如果需要更实时的更新（比如Sheets一有修改就立即同步），可以结合Google Apps Script的onChange触发器和客户端消息推送，但实现复杂度更高，定时刷新是最简便的方案。

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