尝试使用Google脚本从Google表格中获取数据并在具有水平标签的网页上显示

Question

I am trying to fetch data based on office name from a Google Sheet and displayed on an HTML page where the office name is selected using a horizontal tab. 我正在尝试从Google表格中获取基于办公室名称的数据，并显示在HTML页面上，其中使用水平标签选择办公室名称。

The HTML code is displaying fine, but no data is fetched. HTML代码显示正常，但未获取任何数据。 I can't pinpoint the problem. 我无法指出问题所在。 It is my first time with google scripts and web development. 这是我第一次使用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 ;
       }

This is the html code: 这是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>

Answer 1

Try this function: 试试这个功能：

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;
}

This is a lot simpler version of your html. 这是html的简单得多的版本。 Get this working first and you can add the rest of the styles later. 首先使此工作生效，然后可以添加其余样式。

<!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>

You will still have to test and debug but I think it's a little closer to working. 您仍然必须进行测试和调试，但我认为它离工作更近了。 I hope you know how to use the console.log to help you debug the code. 我希望您知道如何使用console.log来帮助您调试代码。

Read Support Page for Debugging Help 阅读支持页面以获取调试帮助

Answer 2

Okay guys the issue related to inability to display has been resolved and here is the code. 好的，与无法显示相关的问题已经解决，这是代码。

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 ;
}

The html portion with the error corrected is as follows: 纠正了错误的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>

尝试使用Google脚本从Google表格中获取数据并在具有水平标签的网页上显示

问题描述

2 个解决方案

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

解决方案2
0 已采纳 2019-01-21 22:23:08

尝试使用Google脚本从Google表格中获取数据并在具有水平标签的网页上显示

问题描述

2 个解决方案

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

解决方案2 0 已采纳 2019-01-21 22:23:08

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

解决方案2
0 已采纳 2019-01-21 22:23:08