搜索值，然后查看 Google 表格并使用 google 应用程序脚本在 html 中显示行值答案

【问题标题】：Search for Value then look in Google Sheet and display row values in html using google apps script搜索值，然后查看 Google 表格并使用 google 应用程序脚本在 html 中显示行值
【发布时间】：2020-05-20 07:58:17
【问题描述】：

我有一个 google 电子表格，其中包含用于在 html 中显示用户表单的菜单。用户表单是一种数据输入表单，可让您将输入数据添加到谷歌电子表格。我添加了一个按钮，该按钮应在 Google 电子表格中搜索 ID 号。这是我的按钮和 ID 号的 html 代码：

html:

<div class="form-row">
      <div class="form-group col-md-2">  
        <label for="idNum">ID Number</label>
        <input type="text" class="form-control" id="idNum">
      </div>

      <button type="button" class="btn btn-outline-info" id="searchbtn">Search Profile</button>

</div>

这是我的按钮搜索脚本：

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


   function searchProfile{

     var appProfile = document.getElementById("idNum").value;

     if(appProfile.length === 6){
     google.script.run.withSuccessHandler(updateProfile).updateIdNum(appProfile);
     } 
     //else{
     //alert("invalid Profile Number");
     }   
   }

   function updateProfile(returnData){
      document.getElementById("rnum").value = returnData[1];
   console.log(retData);

   }

    </script>

我能够搜索 ID 号，但问题是我不知道如何使用电子表格行中的值反映或填充 html 中的字段。

这是我的 .gs 代码：

function updateProfNum(appProfile){
  //var appProfile = "101018"

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var ws = ss.getSheetByName("Results");

  var data = ws.getRange(1, 1, ws.getLastRow(), 1).getValues();
  var dJoin = data.join().split(",");
  vare myPnum = dJoin.indexOf(appProfile);
  var dataRow = ws.getRange(myPnum + 1, 1, 1, ws.getLastColumn()).getValues();


  if (myPnum > -1){
    return dataRow[0];
  } else {
    Logger.log("unknown")
    //return "unavailable";
  }

}

顺便说一下，这是我的电子表格数据示例：

ID Number | First Name | Last Name|
101018    | John       | Doe      |
101011    | Jane       | Doe      |

我试图通过使用按钮搜索 ID 号，然后在其行中获取值来在我的 html 用户表单中反映这些数据。（例如我正在搜索101018，当我点击按钮搜索时，它会在用户表单中反映数据。希望任何人都可以提供帮助。非常感谢您提前。

【问题讨论】：

标签： javascript html google-apps-script google-sheets-api

【解决方案1】：

您的代码大部分是正确的，只是：

您缺少要为其分配输出的 ID 为 "rnum" 的元素。您可以定义例如<output id="rnum"></output>
您在function searchProfile 处遗漏了括号()，并且与函数名称存在一些冲突。

工作代码代码.gs：

function updateIdNum(appProfile){
  //  var appProfile = "101018"

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var ws = ss.getSheetByName("Results");

  var data = ws.getRange(1, 1, ws.getLastRow(), 1).getValues();
  var dJoin = data.join().split(",");
  var myPnum = dJoin.indexOf(appProfile);
  var dataRow = ws.getRange(myPnum + 1, 1, 1, ws.getLastColumn()).getValues();
  Logger.log(dataRow[0]);

  if (myPnum > -1){
    return dataRow[0];
  } else {
    Logger.log("unknown")
    //return "unavailable";
  } 
}


function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
  .createMenu('Custom Menu')
  .addItem('Show sidebar', 'showSidebar')
  .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('index')
  .setTitle('My custom sidebar')
  .setWidth(300);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
  .showSidebar(html);
}

index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="form-row">
      <div class="form-group col-md-2">  
        <label for="idNum">ID Number</label>
        <input type="text" class="form-control" id="idNum">
        <output id="rnum"></output>
      </div>
     <button type="button" class="btn btn-outline-info" id="searchbtn">Search Profile</button>
   </div>
<script>
    document.getElementById("searchbtn").addEventListener("click", searchProfile);
   function searchProfile(){
     var appProfile = document.getElementById("idNum").value;
     if(appProfile.length === 6){
     google.script.run.withSuccessHandler(updateProfile).updateIdNum(appProfile);
     } 
     //else{
     //alert("invalid Profile Number");
     }   
   function updateProfile(returnData){
      document.getElementById("rnum").value = returnData[1];
   }
    </script>
  </body>
</html>

【讨论】：

感谢您指出我的小姐。我修复了它，现在我收到此错误：“未捕获的 TypeError：无法读取 null 的属性 '1'”。我正在努力寻找解决方案。非常感谢
我认为它是从谷歌脚本返回的。记录返回的谷歌脚本它返回了我需要的值，但是在 javascript 中，当我 console.log 出现返回的数据 (console.log(retData) "null"。起初它是无法读取 null 的属性 '1'但现在它唯一的“空”
刚刚发现我把index.html的代码贴错了，现在看看吧。