Question

EDIT ：在其他人的大力帮助下，我得以制定出解决方案。

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

我希望数据显示出来

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

它在电子表格中的确切样子，每个值在单独的单元格中。

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

Code.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;


}

索引.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

ATTEMPT 2

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

Answer 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);
}

Answer 2

使用Array#map，Array#reduce和Array#join用所需的HTML标记包围内部数组的元素，然后将其压缩为单个字符串。当前，您有一个隐式Array#toString调用，该调用创建一个以逗号分隔的内部数组元素的字符串（内部数组位于Col），因此，在先前的尝试输出中只有一个单元格

此简单函数假定您未应用任何特定于列或行的样式或属性，因此它可以简单地等效地对待每个01/17 15:56:08: Launching app $ adb push /home/bf/Projects/.../app-full-debug.apk /data/local/tmp/nl.my.app $ adb shell pm install -t -r "/data/local/tmp/nl.my.app" Success APK installed in 3 s 918 ms $ adb shell am start -n "nl.my.app/nl.my.app.activities.LoginActivity" -a android.intent.action.MAIN -c android.intent.category.LAUNCHER -D Device is offline元素。如果要应用对称样式，则需要先使用[null]处理标头/行变量（因为这样便可以使用元素的索引），然后使用teamData[i]而不是仅{{1} }使用标签定界符。

<td>

Answer 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);

HTML表格行创建

3 个答案: