将电子表格数据显示为 HTML 表格

Question

I have a problem with my HTML Table.我的 HTML 表格有问题。 I want my spreadsheet data to be displayed there.我希望我的电子表格数据显示在那里。 I don't know what did I missed.我不知道我错过了什么。

This is my Code.GS:这是我的 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;

}

This is my Script:这是我的脚本：

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

I almost pulled my hair off, I am frustrated.我差点把头发扯掉，我很沮丧。 I tried everything I know but no luck.我尝试了我所知道的一切，但没有运气。 Can you help?你能帮我吗？

Answer 1

Here's an old piece of code that I used to get all of my Spreadsheets.这是我用来获取所有电子表格的一段旧代码。 Give it a chance to run as it takes a while to load all of the spreadsheets at first.让它有机会运行，因为一开始加载所有电子表格需要一段时间。 It also allows you to edit all of the sheets as well.它还允许您编辑所有工作表。 I'm guessing that you'll be able to figure out how you can use this example to figure how to solve your problem.我猜您将能够弄清楚如何使用此示例来确定如何解决您的问题。

htmlss.hmtl: 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>

Code.gs:代码.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