HTML 表格行创建答案

【问题标题】：HTML Table Row CreationHTML 表格行创建
【发布时间】：2019-06-11 01:22:41
【问题描述】：

编辑：在其他人的大力帮助下，我能够找到解决方案。

我正在从 Google 电子表格中获取数据，然后尝试将其呈现为 WebApp 中的 HTML 表格。

我希望数据显示如下

<tr> <td> <td> <td>

与电子表格中的外观完全相同，每个值都位于单独的单元格中。

大局，我希望能够对每个<td> 做不同的事情，所以我想确保我以一种可用的方式构建数据。

代码.GS

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function webAppTest() {
   getTeamArray();
} 


function getTeamArray() {

  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName('Sheet1');
  var range = sheet.getRange('A2:H1000');
  var values = range.getValues();
  //Logger.log(values);


  var teamsArray = [];

  for (var i = 0; i < values.length; ++i) {

   var column = values[i];
    var colA = column[0];
    var colB = column[1];           
    var colC = column[2];           
    var colD = column[3];           
    var colE = column[4];          
    var colF = column[5];
    var colG = column[6];
    var colH = column[7];

if (colA != '') {

teamsArray.push(values[i][0]);
teamsArray.push(values[i][3]);
teamsArray.push(values[i][4]);
}
} 


  var array2 = [];
    while(teamsArray.length) array2.push(teamsArray.splice(0,3));
      var lengthDivName2 = array2.length;
      var widthDivName2 = array2[0].length;

//Logger.log(teamsArray);
Logger.log(array2);
//return teamsArray;
return array2;


}

Index.HTML 函数

 function buildOptionsList(teamsArray) {
        var div = document.getElementById('myList');
          for (var i = 0; i < teamsArray.length; i++) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var cLass = td.setAttribute('class','ui-state-default');
            var iD = td.setAttribute('id',teamsArray[i]);


        td.appendChild(document.createTextNode(teamsArray[i]));
        div.appendChild(tr);
        div.appendChild(td);
          }
       }


</script>

 </head>
  <body>
    <div id="myList" class="connectedSortable">MY LIST</div>
 </body>
</html>

尝试 1

尝试 2

我尝试更改 code.gs 中的数组创建，它在 <tr> 中获得了所有正确的数据，但没有拆分为 <td>s

【问题讨论】：

为了正确理解您的问题，您能否提供示例输入数据和您想要的输出？我认为这些信息会帮助用户思考你的解决方案。
我实际上更喜欢在服务器端做这样的事情。看看我昨天做的this example。
预期输出如上。 “我希望它显示为......”所以每个 CSV 都是它自己的<td>。我可以添加teamsArray 的来源。
已更新。谢谢！
Cooper，我确实尝试在服务器端创建 HTML，但 HTML 实际上没有返回任何内容。我采用了你所做的并应用了我自己的变量。

标签： javascript html google-apps-script web-applications google-sheets

【解决方案1】：

我不确定我是否理解您接收数据的方式，但如果 teamsArray 包含有关一行的信息，则解决方案将是这样的：

function buildOptionsList(teamsArray) {
    var div = document.getElementById('myList');
    var tr = document.createElement('tr');
    for (var i = 0; i < teamsArray.length; i++) {
        var td = document.createElement('td');
        var cLass = td.setAttribute('class','ui-state-default');
        var iD = td.setAttribute('id',teamsArray[i]);

        td.appendChild(document.createTextNode(teamsArray[i]));
        tr.appendChild(td);
    }
    div.appendChild(tr);
}

【讨论】：

谢谢！我回家后会检查一下。我更新了问题以包含数组的来源。我最初忽略了它，所以我没有弄乱我的问题。
通过进一步研究，我找到了一个对我有用的解决方案，感谢您的帮助！

【解决方案2】：

使用Array#map、Array#reduce 和Array#join 将内部数组的元素用所需的 HTML 标记包围，然后压缩为单个字符串。目前，您有一个隐式的Array#toString 调用，它创建了一个内部数组元素的逗号分隔字符串（内部数组位于teamData[i]），因此您之前的尝试输出中只有一个单元格。

这个简单的函数假定您没有应用任何特定于列或行的样式或属性，因此它可以简单地等效地对待每个<td> 元素。如果要应用对称样式，则需要先使用 .map 处理标题/行变量（因为您可以使用元素的索引），然后使用标签分隔符 .join("") 而不是 .join。

function getTableHTMLFrom(array, hasHeaders) {
  if (!array || !array.length || !array[0].length)
    return "";

  const headerString = (hasHeaders ?
    "<tr><th>" + array.shift().join("</th><th>") + "</th></tr>"
    : "");

  const tdTag = "<td class=\"ui-state-default\">";
  const bodyString = array.reduce(function (s, row) {
    s += "<tr>" + tdTag + row.join("</td>" + tdTag) + "</td></tr>";
    return s;
  }, "");
  return "<table>" + headerString + bodyString + "</table>";
}

【讨论】：

我将此应用到Index.HTML 并更改了变量/函数名称，但WebApp 中没有任何显示。我需要将此返回给 Code.GS 吗？ array2 在 Code.GS 中有值。
这个假设函数getTableHTMLFrom将用于获取HTMLElement#innerHTML所需的HTML字符串
通过进一步研究，我找到了一个对我有用的解决方案，感谢您的帮助！

【解决方案3】：

我找到了一个基于THIS 的解决方案（适用于Index.HTML）。

function buildOptionsList(array2) {
  var table = document.createElement('table');
  var tableBody = document.createElement('tbody');

  array2.forEach(function(rowData) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      var cLass = td.setAttribute('class','ui-state-default');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  document.body.appendChild(table);
}

buildOptionsList(array2);

【讨论】：