Google Apps Script范围起始行过小报错及HTML搜索无响应求助

存在的两个问题 #

• 抛出 Exception: The starting row of the range is too small. 错误
• HTML页面输入ID点击搜索按钮无响应

错误原因分析 #

1. 范围错误：
   原代码中ws.getRange(2, 1, ws.getLastRow(), 1)的行数参数错误——ws.getLastRow()是表格总行数（含表头），从第2行开始取数据时，行数应该是总行数-1，否则会超出实际数据范围，触发起始行过小的错误。另外，返回时用到的dataRow变量未定义，直接返回会导致无响应。
2. 无响应问题：
   HTML中searchProfile函数的大括号不匹配，导致语法错误，点击按钮后逻辑无法执行。同时output标签属于内容型元素，应该用textContent而非value设置显示内容。

修改后的完整代码 #

index.html #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="form-row p-3">
      <div class="form-group col-md-2">  
        <label for="idNum">ID Number</label>
        <input type="text" class="form-control" id="idNum" placeholder="输入6位ID">
        <output id="rnum" class="mt-2 d-block"></output>
      </div>
     <button type="button" class="btn btn-outline-info align-self-end" id="searchbtn">Search Profile</button>
   </div>
<script>
    document.getElementById("searchbtn").addEventListener("click", searchProfile);
    
    function searchProfile(){
     var appProfile = document.getElementById("idNum").value.trim();
     if(appProfile.length === 6){
       google.script.run
         .withSuccessHandler(updateProfile)
         .withFailureHandler(error => alert("搜索出错：" + error))
         .updateIdNum(appProfile);
     } else {
       alert("请输入有效的6位ID");
     }   
   }
   
   function updateProfile(returnData){
      if(returnData){
        document.getElementById("rnum").textContent = `姓名：${returnData[1]} ${returnData[2]}`;
      } else {
        document.getElementById("rnum").textContent = "未找到该ID对应的记录";
      }
   }
    </script>
  </body>
</html>

Apps Script #

function doGet(e){
  return HtmlService.createHtmlOutputFromFile("index");
}

function updateIdNum(appProfile){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var ws = ss.getSheetByName("Results");
  
  // 修正范围：从第2行开始，行数为总行数减1（排除表头）
  let data = ws.getRange(2, 1, ws.getLastRow() - 1, 1).getValues()
    .flat()
    .filter(cell => cell != '');
  
  let myPnum = data.indexOf(appProfile);
  if(myPnum === -1) {
    return null;
  } else {
    // 获取对应完整行数据，索引转实际行号需加2（表头行+数组起始偏移）
    let fullRow = ws.getRange(myPnum + 2, 1, 1, ws.getLastColumn()).getValues()[0];
    return fullRow;
  }
}

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

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('index')
  .setTitle('个人信息查询')
  .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

关键修改说明 #

1. HTML端：
   • 修复函数大括号匹配问题，补充非法输入的提示逻辑
   • 添加错误处理回调，便于排查后端执行异常
   • 改用textContent设置output标签内容，优化显示格式
   • 引入Bootstrap样式，提升页面布局美观度
2. Apps Script端：
   • 修正数据范围的行数参数，避免超出表格实际数据行
   • 定义并返回完整行数据，替换未定义的dataRow变量
   • 未找到ID时返回null，便于前端统一处理无结果场景
   • 精简逻辑结构，提升代码可读性

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