堆棧內存溢出
  簡體   English   中英

嘗試使用Google腳本從Google表格中獲取數據並在具有水平標簽的網頁上顯示

[英]Trying to fetch data from Google Sheets using Google script and displaying on web page having horizontal tab

 原文  2019-01-18 20:32:41  0   2    javascript/ html/ css/ google-apps-script/ google-sheets

問題描述

我正在嘗試從Google表格中獲取基於辦公室名稱的數據，並顯示在HTML頁面上，其中使用水平標簽選擇辦公室名稱。

HTML代碼顯示正常，但未獲取任何數據。 我無法指出問題所在。 這是我第一次使用Google腳本和網絡開發。 

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

  function fetchRushIv(officeName){
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
 var currSheet = spreadSheet.getSheetByName('OG_Database');
 currSheet.activate();

  var table;
     var data = currSheet.getRange(5, 1, currSheet.getLastRow(), 
 currSheet.getLastColumn()).getValues();

  table = "<table id='Rush IV' border='1' style = 'width:100%' 
  padding:10px>";
  for(var i=1;i<data.length;i++){
   var compar=data[i][0];
   if(compar=="Office Name" || compar===officeName){
         table+='<tr>';
      for(var j=0;j<data[1].length;j++){
      table += "<td>"+data[i][j]+"</td>";
       }
      table += "</tr>";
       }
       else{
        return 0;
        }

       }
       table += "</table>"

      return table ;
       }

這是html代碼： 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <base target="_top" />
    <script>
      src = "main.js";
    </script>
    <style>
      body {
        font-family: Arial;
      }

      /* Style the tab */
      .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }

      /* Style the buttons inside the tab */
      .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
      }

      /* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #ddd;
      }

      /* Create an active/current tablink class */
      .tab button.active {
        background-color: #ccc;
      }

      /* Style the tab content */
      .tabcontent {
        display: none;
        padding: 6px 12px;
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
      }

      /* Fade in tabs */
      @-webkit-keyframes fadeEffect {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes fadeEffect {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      * {
        box-sizing: border-box;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      /*style the header*/
      header {
        background-color: #008080;
        padding: 30px;
        text-align: center;
        font-size: 35px;
        color: white;
      }

      /*define the second column containing the data area.*/
      dataArea {
        float: left;
        background-color: #fff8dc;
        width: 80%;
        padding: 20px;
        color: #000;
      }

      /*style the footer*/
      footer {
        float: left;
        width: 100%;
        background-color: #008080;
        padding: 15px;
        text-align: center;
        color: white;
      }

      /*Add responsive layout for the compensation of using on smaller 
screens,i.e.,
     *the two columns will stack up on each other in smaller sized screens.
     */
      @media (max-width: 600px) {
        nav,
        dataArea {
          width: 100%;
          height: auto;
        }
      }
    </style>
    <script>
      google.script.run
        .withFailureHandler(failed)
        .withSuccessHandler(displayData)
        .fetchRushIv();

      function getData(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
      }

      function displayData(table) {
        document.getElementById("customers").innerHTML = table;
      }
      function failed(e) {
        alert("error=" + e);
      }
    </script>
  </head>
  <body>
    <header><h4>Sample Data Fetching</h4></header>
    <div class="tab">
      <button
        class="tablinks"
        onclick="getData(event,'Beaumont') google.script.run.withFailureHandler(failed).withSuccessHandler(displayData).fetchRushIv('Beaumont')"
      >
        Beaumont
      </button>
      <button
        class="tablinks"
        onclick="getData(event,'Crosby') google.script.run.withFailureHandler(failed).withSuccessHandler(displayData).fetchRushIv('Crosby')"
      >
        Crosby
      </button>
      <button
        class="tablinks"
        onclick="getData(event,'Splendora') google.script.run.withFailureHandler(failed).withSuccessHandler(displayData).fetchRushIv('Splendora')"
      >
        Splendora
      </button>
    </div>
    <div id="content " class="tabcontent">
      <h3>The data Table for the Selected Office</h3>
      <table id="customers" style="width: 100%;"></table>
    </div>
  </body>
</html>

2 個解決方案

解決方案1
 0  2019-01-19 02:49:17

試試這個功能： 

function fetchRushIv(officeName){
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('OG_Database');
  var data=sh.getRange(5,1,sh.getLastRow(),sh.getLastColumn()).getValues();
  var html="<style>th,td{border:1px solid #000;padding:5px;}</style><table>"; 
  for(var i=0;i<data.length;i++){
    if(data[i][0]=="Office Name" || data[i][0]==officeName){//I had trouble figuring out what you were doing here so this may be wrong
      html+='<tr>';
      for(var j=0;j<data[i].length;j++){
        html+="<td>"+data[i][j]+"</td>";
      }
      html+="</tr>";
    }
  }
  html+="</table>";
  return html;
}

這是html的簡單得多的版本。 首先使此工作生效，然后可以添加其余樣式。 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function(){//this will run as soon as your DOM loads and that should load your table
      google.script.run
      .withSuccessHandler(function(hl){
         document.getElementById('customers').innerHTML=hl;
       })
      .fetchRushIv();

    }) 
   console.log('MyCode');
   </script>
 </head>
  <body>
  <div id="customers"></div> 
</body>
</html>

您仍然必須進行測試和調試，但我認為它離工作更近了。 我希望您知道如何使用console.log來幫助您調試代碼。

解決方案2
 0 已采納  2019-01-21 22:23:08

好的，與無法顯示相關的問題已經解決，這是代碼。 

function fetchRushIv(officeName){
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
  var currSheet = spreadSheet.getSheetByName('OG_Database');
  currSheet.activate();
    var data = currSheet.getRange(5, 1, currSheet.getLastRow(), 
currSheet.getLastColumn()).getValues();

 var html="<style>th,td{border:1px solid #000;padding:5px;}</style> 
 <table>";;
  for(var i=0;i<data.length;i++){
       if(data[i][0]=="Office Name" || data[i][0]==officeName){
         html+='<tr>';
      for(var j=0;j<data[1].length;j++){
      html += "<td>"+data[i][j]+"</td>";
      }
      html+= "</tr>";
}

}
html += "</table>"

  return html ;
}

糾正了錯誤的html部分如下： 

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "block";
   google.script.run.withFailureHandler(failed).
withSuccessHandler(displayData).fetchRushIv(cityName);
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";

 } 

function displayData(table){
document.getElementById('customers').innerHTML=table;
}

function failed(e){
alert("error:"+e);
}
</script>

暫無
暫無

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

相關問題 使用 Google 應用腳本從多個工作表中獲取數據 使用谷歌表格腳本登錄網頁 將數據提取到 Google 表格 當我嘗試從 Google 表格中獲取數據時，如果此數據包含日期或時間，則不會將其提取到 Google 應用腳本中 從 Google 表格中提取數據以在 Google 腳本上制作甘特圖並將 HTML 作為網絡應用程序提供 如何獲取 JSON 數據並將其解析為 Google 表格腳本？ 觸發運行 Google Sheets 腳本以批量從 Yahoo Finance 獲取 URL 數據 從Google Sheets腳本的Sheet中的選項卡導入A2行 使用 Google 表格中的數據在 Google Apps 腳本中自動完成 Google Apps Script - 按標簽顏色獲取工作表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM