堆棧內存溢出
  簡體   English   中英

使用3個選擇列表中的選項從Google站點中的Google表格返回表格

[英]Return Table from Google Sheets in Google Sites Using Options from 3 Select Lists

 原文  2019-01-25 14:48:37  9   2    javascript/ google-sheets/ google-sheets-api/ google-sheets-query

問題描述

我有一個Google表格，我希望用戶可以通過在選擇列表中選擇三個選項來讓用戶在Google站點中進行查詢，並將其作為表格返回結果。

我的床單在這里 。

我嘗試了一些setQuery示例，但是運氣不佳，因為幾乎所有示例都返回我不想要的圖表，只是一張表中的表格。 以下是我嵌入Google網站（減去CSS）后的內容。 函數text()只是一項測試，以確保我正在捕捉人們的選擇。 因此，您將看到此代碼在腳本中還沒有Google函數，這就是我所缺少的。 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Search For Your Zodiac Twin</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    function text(){
      var s = document.getElementsByName('sun')[0];
      var stext = s.options[s.selectedIndex].text;
      var m = document.getElementsByName('moon')[0];
      var mtext = m.options[m.selectedIndex].text;
      var r = document.getElementsByName('rising')[0];
      var rtext = r.options[r.selectedIndex].text;
      document.getElementById("resulttext").innerHTML='Instagram users who match your signs are:';
      document.getElementById("resulttable").innerHTML='Your sun sign is ' + stext + ', your moon is ' + mtext + ', and your rising is ' + rtext;
    }
  </script>

</head>

<body>
  <div class="container">
    <form action="">
      <div class="form-group">
        <label for="sun" style="color: #ffc107ff">Sun</label>
        <br>
        <select name="sun" class="form-control-sun" id="sun">
          <option value="" selected disabled hidden>Choose Your Sun</option>
          <option value="Aquarius">Aquarius</option>
          <option value="Aries">Aries</option>
          <option value="Cancer">Cancer</option>
          <option value="Capricorn">Capricorn</option>
          <option value="Gemini">Gemini</option>
          <option value="Leo">Leo</option>
          <option value="Libra">Libra</option>
          <option value="Pisces">Pisces</option>
          <option value="Sagittarius">Sagitarrius</option>
          <option value="Scorpio">Scorpio</option>
          <option value="Tarus">Taurus</option>
          <option value="Virgo">Virgo</option>
        </select>
        <br>
        <label for="moon" style="color: #2196f3ff">Moon</label>
        <br>
        <select name="moon" class="form-control-moon" id="moon">
          <option value="" selected disabled hidden>Choose Your Moon</option>
          <option value="Aquarius">Aquarius</option>
          <option value="Aries">Aries</option>
          <option value="Cancer">Cancer</option>
          <option value="Capricorn">Capricorn</option>
          <option value="Gemini">Gemini</option>
          <option value="Leo">Leo</option>
          <option value="Libra">Libra</option>
          <option value="Pisces">Pisces</option>
          <option value="Sagittarius">Sagitarrius</option>
          <option value="Scorpio">Scorpio</option>
          <option value="Tarus">Taurus</option>
          <option value="Virgo">Virgo</option>
        </select>
        <br>
        <label for="rising" style="color: #4caf50ff">Rising</label>
        <br>
        <select name="rising" class="form-control-rising" id="rising">
          <option value="" selected disabled hidden>Choose Your Rising</option>
          <option value="Aquarius">Aquarius</option>
          <option value="Aries">Aries</option>
          <option value="Cancer">Cancer</option>
          <option value="Capricorn">Capricorn</option>
          <option value="Gemini">Gemini</option>
          <option value="Leo">Leo</option>
          <option value="Libra">Libra</option>
          <option value="Pisces">Pisces</option>
          <option value="Sagittarius">Sagitarrius</option>
          <option value="Scorpio">Scorpio</option>
          <option value="Tarus">Taurus</option>
          <option value="Virgo">Virgo</option>
        </select> 
        <br>
        <label style="color: #6a1b9aff;">Search</label>
        <br>
        <input type="button" value="Find My Twin" id="but" onclick="text()" />
        <hr>
        <p id="resulttext"></p>
        <p id="resulttable"></p>
      </div>
    </form>
  </div>
</body>
<html>

因此，例如，如果有人選擇了sun Aquarius ， moon Aries和rising Cancer那么當他們按下按鈕時，我希望它返回完整的表格，其中C = sun ， D = moon ， E = rising 。

2 個解決方案

解決方案1
 0  2019-01-25 14:58:55

看來您尚未開始使用Google Sheets API。 您需要先訪問它，然后才能繼續從表格中獲取數據。 該API的文檔位於： https : //developers.google.com/sheets/api/ 。

設置說明： https : //developers.google.com/sheets/api/quickstart/js
從工作表中讀取值： https : //developers.google.com/sheets/api/samples/reading

對您來說，最簡單的方法可能是提取整個數據表，然后對它進行過濾。

例如，使用上面的指南將返回以下內容： 

{
  "range": "Sheet1!A1:D5",
  "majorDimension": "ROWS",
  "values": [
    ["Item", "Cost", "Stocked", "Ship Date"],
    ["_st.x_r","Aquarius","Aquarius","Aquarius"],
    ["Placlara","Aquarius","Aquarius","Aquarius"],
    ["@sassybre2","Aquarius","Aquarius","Aquarius"],
    ["awitchydisco","Aquarius","Aquarius","Aries"],
    ["ellelleff","Aquarius","Aquarius","Cancer"],
    ["hunter.frisk","Aquarius","Aquarius","Cancer"],
    ...
  ],
}

然后，您可以使用response.values過濾獲取的值，並使用response.values.filter(value => value[1] == 'sun' && value[2] == 'moon' && value[3] = 'rising' 。

解決方案2
 0 已采納  2019-01-26 21:10:32

昨天我設法弄清楚了。 我將此添加到我的頭腳本中 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
    var visualization;
    function drawVisualization() {
      // This saves the user's selected options from the selects in the body
      var sun = $('#sun').find(":selected").text();
      var moon = $('#moon').find(":selected").text();
      var rising = $('#rising').find(":selected").text();

      //How to query from a Google Sheets doc via URL
      var query = new google.visualization.Query(
          '//docs.google.com/spreadsheets/d/1f5WBP_vizrCw27fSA6yc0EEN_twmdC-PoXZhm_PSNH0/edit?usp=sharing');

      // The SELECT query where I search based on the user input variables, also created labels for the table headers
      query.setQuery("SELECT B,C,D,E WHERE C = '"+sun+"' AND D = '"+moon+"' AND E = '"+rising+"' ORDER BY B LABEL B 'Instagram', C 'Sun', D 'Moon', E ' Rising'");

      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      visualization = new google.visualization.Table(document.getElementById('visualization'));
      visualization.draw(data, {width: '500px'});      
    }
    </script>

這部分是觸發以上功能的HTML正文中的小片段 

<input type="button" value="Find My Twin" id="but" onclick="drawVisualization()" />
<hr>
<div id="visualization"></div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將表格單元格中的內容復制到 Google 協作平台 使用來自 Google 協作平台的 Google 日歷 API Email 使用應用程序腳本從谷歌表格中獲取表格 - 單擊按鈕 來自 Google 表格的表 HTML 帶有超鏈接 將數據從谷歌表導入 MySQL 表 將數據從Google表格中提取到HTML表格中 從gmail獲取html表並使用谷歌應用程序腳本放入谷歌表 使用Google文檔/表格中的代碼 使用 google 表格作為數據庫從代碼進行身份驗證 在Google表格腳本編輯器中從json返回值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM