將電子表格數據顯示為 HTML 表格

Question

我的 HTML 表格有問題。 我希望我的電子表格數據顯示在那里。 我不知道我錯過了什么。

這是我的 Code.GS：

function getTableData(){
  var url3 = "https://docs.google.com/spreadsheets/d/xxxxxxxxxx/edit#gid=0";
  var ss3 = SpreadsheetApp.openByUrl(url3);
  var ws3 = ss3.getSheetByName("Time");
  var data = ws3.getRange(2,2,ws3.getLastRow()-1,10).getValues();
  //Logger.log(data);
  return data;

}

這是我的腳本：

 <script>

var data = [
    [1, "Jack",55],
    [1, "Jack",55],
    [1, "Jack",55]
];

document.addEventListener("DOMContentLoaded", function(){

google.script.run.withSuccessHandler(generateTable).getTableData();


});

function generateTable(dataArray){

var tbody = document.getElementById("table-body");

dataArray.forEach(function(r){

var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[0];
var col2 = document.createElement("td");
col2.textContent = r[1];
var col3 = document.createElement("td");
col3.textContent = r[2];
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
tbody.appendChild(row);
});

}

</script>

HTML：

 <table> <thead> <tr> <th>E-mail</th> <th>Case</th> <th>Assignment</th> <th>Notes</th> <th>Start Date</th> <th>Start Time</th> <th>End Date</th> <th>End Time</th> <th>Total</th> </tr> </thead> <tbody id="table-body"> </tbody> </table>

我差點把頭發扯掉，我很沮喪。 我嘗試了我所知道的一切，但沒有運氣。 你能幫我嗎？

Answer 1

這是我用來獲取所有電子表格的一段舊代碼。 讓它有機會運行，因為一開始加載所有電子表格需要一段時間。 它還允許您編輯所有工作表。 我猜您將能夠弄清楚如何使用此示例來確定如何解決您的問題。

htmlss.hmtl：

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
      $('#msg').html('Please wait. Collecting a list of all Spreadsheets...');
      google.script.run
         .withSuccessHandler(updateSelect)
         .getAllSpreadSheets();
    });

    function updateSS(i,j)
    {
      var str='#txt' + String(i) + String(j);
      var value=$(str).val();
      var ssId=$('#sel1').val();
      var name=$('#sel2').val();
      var updObj={rowIndex:i,colIndex:j,value:value,id:ssId,name:name};
      $(str).css('background-color','#ffff00');
      google.script.run
         .withSuccessHandler(updateSheet)
         .updateSpreadsheet(updObj);
    }

    function updateSheet(data)
    {
      //$('#success').text(data.message);
      $('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
    }

    function updateSelect(dtO)
    {
      $('#sel1').css('background','#ffffff');
      $('#sel2').css('background','#ffffff');
      $('#msg').html('Spreadsheet List has been updated.  Now select a SpreadSheet to display');
      var select = document.getElementById(dtO.type);
      var vA=dtO.array;
      select.options.length = 0; 
      for(var i=0;i<vA.length;i++)
      {
        select.options[i] = new Option(vA[i][0],vA[i][vA[i].length-1]);
      }
    }

    function loadSelectSheet()
    {
       var shId=$('#sel1').val();
       var name=$('#sel1').text();
       $('#sel1').css('background','#ffff00');
       document.getElementById('ssname').innerHTML="";
       var ssO={name:name ,id:shId}
       google.script.run
           .withSuccessHandler(updateSelect)
           .getAllSheets(ssO);

    }

    function displaySelectedSheet()
    {
       var ssId=$('#sel1').val();
       var name=$('#sel2').val();
       $('#sel2').css('background','#ffff00');
       document.getElementById('shname').innerHTML="";
       var ssO={id:ssId,name:name};
       google.script.run
           .withSuccessHandler(displaySheet)
           .htmlSpreadsheet(ssO);
    }

    function displaySheet(opO)
    {
        $('#sel2').css('background','#ffffff');
        document.getElementById('ssname').innerHTML=opO.name;
        document.getElementById('shname').innerHTML=opO.shname;
        document.getElementById('sss').innerHTML=opO.hl;
    }

    console.log('My Code');
    </script>
    <style>
      th{text-align:left}
    </style>
  </head>
  <body>
  <div id="msg"></div><br />
  <br /><select id="sel1" onChange="loadSelectSheet();"></select>
  <br /><select id="sel2" onChange="displaySelectedSheet();"></select>
  <div id="ssname"></div>
  <div id="shname"></div>
  <div id="sss"></div>
  </body>
</html>

代碼.gs：

function htmlSpreadsheet(ssO) {
  var br='<br />';
  var s='';
  var hdrRows=1;
  var ss=SpreadsheetApp.openById(ssO.id);
  var sht=ss.getSheetByName(ssO.name);
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  s+='<table>';
  for(var i=0;i<rngA.length;i++)
  {
    s+='<tr>';
    for(var j=0;j<rngA[i].length;j++)
    {
      if(i<hdrRows)
      {
        s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
      } 
      else
      {
        s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
      }
    }
    s+='</tr>';
  }
  s+='</table>';
  s+='</body></html>';
  var namehl=Utilities.formatString('<h1>%s</h1>', ss.getName());
  var shnamehl=Utilities.formatString('<h2>%s</h2>', sht.getName());
  var opO={hl:s,name:namehl,shname:shnamehl};
  return opO;
}

function updateSpreadsheet(updObj) {
  var i=updObj.rowIndex;
  var j=updObj.colIndex;
  var value=updObj.value;
  var ss=SpreadsheetApp.openById(updObj.id);
  var sht=ss.getSheetByName(updObj.name);
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  rngA[i][j]=value;
  rng.setValues(rngA);
  var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
  return data;
}

function doGet() {
  var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
  return userInterface.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getAllSpreadSheets() {
  var files=DriveApp.getFilesByType(MimeType.GOOGLE_SHEETS); 
  var s = '';
  var vA=[['Select Spreadsheet',0]];
  while(files.hasNext())
  {
    var file = files.next();
    var fileName=file.getName();
    var fileId=file.getId();
    vA.push([fileName,fileId]);
  }
  //return vA;
  return {array:vA,type:'sel1'};
}

//working on this function right now 2017/11/08
function getAllSheets(ssO) {
  var ss=SpreadsheetApp.openById(ssO.id);
  var allSheets=ss.getSheets();
  var vA=[['Select Sheet']];
  for(var i=0;i<allSheets.length;i++)
  {
    var name=allSheets[i].getName();
    vA.push([name]);
  }
  return {array:vA,type:'sel2'};
}

將電子表格數據顯示為 HTML 表格

問題描述

1 個解決方案

解決方案1
0 已采納 2019-06-29 18:04:14

將電子表格數據顯示為 HTML 表格

問題描述

1 個解決方案

解決方案1 0 已采納 2019-06-29 18:04:14

解決方案1
0 已采納 2019-06-29 18:04:14