如何连接HTML与Google Sheet并根据用户输入显示对应行数据

需求：实现一个侧边栏HTML页面，用户输入6位ID Number后，从Google Sheet的"Results"工作表中查询对应行的完整数据并展示。

修改后的完整代码 #

1. index.html（Google Apps Script的HTML文件） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- 引入Bootstrap样式优化界面 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  </head>
  <body class="p-3">
    <div class="form-row align-items-center">
      <div class="form-group col-md-8 mb-2">  
        <label for="idNum" class="form-label">ID Number</label>
        <input type="text" class="form-control" id="idNum" placeholder="输入6位数字ID">
      </div>
      <div class="col-md-4 mb-2 d-flex align-items-end">
        <button type="button" class="btn btn-outline-info w-100" id="searchbtn">查询档案</button>
      </div>
    </div>
    <!-- 结果展示区域 -->
    <div class="mt-3" id="resultArea" style="display:none;">
      <h6>查询结果</h6>
      <ul class="list-group">
        <li class="list-group-item"><strong>ID:</strong> <span id="resultId"></span></li>
        <li class="list-group-item"><strong>名字:</strong> <span id="resultFirstName"></span></li>
        <li class="list-group-item"><strong>姓氏:</strong> <span id="resultLastName"></span></li>
      </ul>
    </div>
    <!-- 错误提示区域 -->
    <div class="mt-3 alert alert-danger d-none" id="errorAlert"></div>

<script>
document.getElementById("searchbtn").addEventListener("click", searchProfile);

function searchProfile(){
  const appProfile = document.getElementById("idNum").value.trim();
  // 重置结果与提示
  document.getElementById("resultArea").style.display = "none";
  document.getElementById("errorAlert").classList.add("d-none");

  if(appProfile.length === 6 && /^\d+$/.test(appProfile)){
    google.script.run
      .withSuccessHandler(updateProfile)
      .withFailureHandler(showError)
      .updateIdNum(appProfile);
  } else {
    showError("请输入有效的6位数字ID");
  }   
}

function updateProfile(returnData){
  if(returnData){
    document.getElementById("resultId").textContent = returnData[0];
    document.getElementById("resultFirstName").textContent = returnData[1];
    document.getElementById("resultLastName").textContent = returnData[2];
    document.getElementById("resultArea").style.display = "block";
  } else {
    showError("未找到该ID对应的档案");
  }
}

function showError(message){
  document.getElementById("errorAlert").textContent = message;
  document.getElementById("errorAlert").classList.remove("d-none");
}
</script>
  </body>
</html>

2. Google Apps Script代码 #

function updateIdNum(appProfile){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Results");
  if(!ws){
    throw new Error("未找到名为Results的工作表");
  }

  // 获取所有数据行，跳过表头直接匹配
  const allData = ws.getDataRange().getValues();
  const matchedRow = allData.find(row => row[0] == appProfile);
  
  if(matchedRow){
    return matchedRow;
  } else {
    return null;
  } 
}

function onOpen() {
  SpreadsheetApp.getUi()
  .createMenu('自定义菜单')
  .addItem('打开查询侧边栏', 'showSidebar')
  .addToUi();
}

function showSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('index')
  .setTitle('档案查询')
  .setWidth(350);
  SpreadsheetApp.getUi().showSidebar(html);
}

关键修改说明 #

• HTML部分

  • 修复原代码中searchProfile函数未正确闭合的语法错误
  • 替换原output标签为结构化结果展示区域，使用textContent更新内容（output的value仅适用于表单关联场景）
  • 增加输入格式验证（确保是6位数字）和错误提示模块
  • 引入Bootstrap样式提升界面易用性

• Apps Script部分

  • 改用find方法直接匹配ID行，替代原join+indexOf方案，避免ID含特殊字符时的错误
  • 增加工作表存在性检查，提前抛出明确错误
  • 未找到匹配行时返回null，方便前端统一处理逻辑
  • 菜单和侧边栏标题改为中文，贴合使用场景

• 联动逻辑

  • 前端增加withFailureHandler捕获脚本执行异常（如工作表不存在）
  • 查询前重置结果与提示，避免旧内容干扰

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