使用Google表格資料（行和列）填充HTML表格

遇到問題可能是一個相當容易解決的問題。

• 背景關系：我的代碼目前正在從 Google 表格中提取資料，制作某種表格并將其發送回 HTML，在其中重新填充已經存在的表格。

• 問題：我無法使其構建列和行。它一次性將資料全部粘貼回來（參見圖片了解背景關系）。

• 檔案：GS & HTML。我相信問題在于我如何制作桌子。我知道''的當前處置沒有意義，bu

帶有 Gsheet 值的 HTML 表格：

原始 Gsheet 表：

谷歌腳本

function populateStratTb2(){
  var tablerows = SpreadsheetApp.getActive().getSheetByName('supp_str').getRange(1, 5, 1000).getValue();
  var tablevalues = SpreadsheetApp.getActive().getSheetByName('supp_str').getRange(4, 1, tablerows).getValues();
  var tvlen = tablevalues.length

 
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("supp_str");
  var myRange = sheet.getRange("d3:m"   tvlen); 
  var data    = myRange.getValues();
  var optionsHTML = "";

for ( var r = 0; r < 10; r =1) {
  for (var i = 0; i < data.length; i =1) {
    optionsHTML  = '<tr><td>'   data[i][r]   '</td></tr>';
  }};
   return optionsHTML;

}

HTML 腳本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script>
   $(function(){
     google.script.run
       .withSuccessHandler(displayData)
       .populateStratTb2();
   });
   function displayData(hl){
     document.getElementById('strattable').innerHTML=hl;
   }
   console.log('MyCode');
   </script>

PS。我花了好幾個小時在論壇上滾動挑選一些內容并改進我的原始代碼。我確信這個問題（或類似問題）已經得到解答，但我無法找到它。

uj5u.com熱心網友回復：

在您的腳本中，如何進行以下修改？

修改一：

如果你的for回圈被使用了，那么下面的修改呢？

function populateStratTb2() {
  var sheet = SpreadsheetApp.getActive().getSheetByName('supp_str');
  var tablerows = sheet.getRange(1, 5, 1000).getValue();
  var tablevalues = sheet.getRange(4, 1, tablerows).getValues();
  var tvlen = tablevalues.length
  var myRange = sheet.getRange("d3:m"   tvlen);
  var data = myRange.getValues();
  var optionsHTML = "";
  for (var r = 0; r < 10; r  = 1) {
    var row = "";
    for (var i = 0; i < data.length; i  = 1) {
      row  = '<td>'   data[i][r]   '</td>';
    }
    optionsHTML  = '<tr>'   row   '</tr>';
  }
  optionsHTML = '<table border="1" style="border-collapse: collapse">'   optionsHTML   "</table>";
  return optionsHTML;
}

• 我擔心您的 for 回圈可能不是您的預期結果。因此，我想再提出一個修改后的腳本作為“修改 2”。

修改二：

如果你data的轉換成HTML表格，那么下面的修改呢？

function populateStratTb2() {
  var sheet = SpreadsheetApp.getActive().getSheetByName('supp_str');
  var tablerows = sheet.getRange(1, 5, 1000).getValue();
  var tablevalues = sheet.getRange(4, 1, tablerows).getValues();
  var tvlen = tablevalues.length
  var myRange = sheet.getRange("d3:m"   tvlen);
  var data = myRange.getValues();
  var optionsHTML = '<table border="1" style="border-collapse: collapse">'   data.reduce((s, r) => s  = "<tr>"   r.map(c => `<td>${c}</td>`).join("")   "</tr>", "")   "</table>";
  return optionsHTML;
}

筆記：

• 如果不想加邊框，請修改<table border="1" style="border-collapse: collapse">為<table>.

• 從您的回復中，我為該腳本添加了 2 個示例腳本，以獲取相同的結果，reduce如下for loop所示。

  • reduce

      var optionsHTML = '<table border="1" style="border-collapse: collapse">'   data.reduce((s, r) => s  = "<tr>"   r.map(c => `<td>${c}</td>`).join("")   "</tr>", "")   "</table>";
    

  • for loop

      var optionsHTML = "";
      for (var r = 0; r < data.length; r  ) {
        var row = "";
        for (var c = 0; c < data[r].length; c  ) {
          row  = '<td>'   data[r][c]   '</td>';
        }
        optionsHTML  = '<tr>'   row   '</tr>';
      }
      optionsHTML = '<table border="1" style="border-collapse: collapse">'   optionsHTML   "</table>";
    

參考：

• 減少（）

標籤：javascript html 谷歌应用脚​​本 谷歌表格

上一篇：手動填充同一行中的另一個單元格時自動填充Google表格中的單元格

下一篇：如何將我的谷歌作業表腳本轉換為網路應用程式？