Создание строки таблицы HTML - PullRequest
Новая
       35

Создание строки таблицы HTML

0 голосов
/ 17 января 2019

РЕДАКТИРОВАТЬ : При значительной помощи других мне удалось найти решение.

Я беру данные из таблицы Google, а затем пытаюсь отобразить их в виде таблицы HTML в веб-приложении.

Я бы хотел, чтобы данные отображались как

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

точно, как это выглядит в электронной таблице, с каждым значением в отдельной ячейке.

enter image description here

В целом, я хотел бы иметь возможность делать разные вещи для каждого <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;


}

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

enter image description here

ПОПЫТКА 2

Я пытался изменить создание массива в code.gs, который получил все правильные данные в <tr>, но не разбил на <td> s

enter image description here

Ответы [ 3 ]

0 голосов
/ 17 января 2019

Используйте Array#map, Array#reduce и Array#join, чтобы окружить элементы внутреннего массива необходимыми тегами HTML, а затем сжать в одну строку. В настоящее время у вас есть неявный вызов Array#toString, который создает разделенную запятыми строку элементов внутреннего массива (внутренний массив в teamData[i]), и, таким образом, у вас есть только одна ячейка в ваших предыдущих попытках 'output.

Эта простая функция предполагает, что вы не применяете какие-либо стили или атрибуты, специфичные для столбцов или строк, поэтому она может просто одинаково обрабатывать каждый элемент <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>";
}
0 голосов
/ 18 января 2019

Я нашел решение (примененное к 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);
0 голосов
/ 17 января 2019

Я не уверен, что понял, как вы получаете данные, но если 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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...