文章/答案/技术大牛

发布

社区首页 >问答首页 >使用3个选择列表的选项从Google站点中的Google工作表返回表

问使用3个选择列表的选项从Google站点中的Google工作表返回表
EN

Stack Overflow用户

提问于 2019-01-25 14:48:37

回答 2查看 990关注 0票数 0

我有一个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的完整表。

google-sheets

google-sheets-api

google-sheets-query

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 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>

票数 0

Stack Overflow用户

发布于 2019-01-25 14:58:55

看起来您还没有开始使用。在继续从工作表中获取数据之前，您需要访问它。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'的内容过滤它们。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54367613

复制

相似问题

问使用3个选择列表的选项从Google站点中的Google工作表返回表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用3个选择列表的选项从Google站点中的Google工作表返回表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用3个选择列表的选项从Google站点中的Google工作表返回表
EN