使用 Google 表格數據（行和列）填充 HTML 表格

Question

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

• 上下文：我的代碼目前正在從 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。 我花了好幾個小時在論壇上滾動挑選一些內容並改進我的原始代碼。 我確信這個問題（或類似問題）已經得到解答，但我無法找到它。

Answer 1

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

修改一：

如果你的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>";

參考：

• 減少（）