Как перечислить записи из диапазона столбцов листа Google в таблице HTML?
В настоящее время я использую следующий код для извлечения записей номера PO из столбца A на вкладке Google Sheet с именем «POHistory». Проблема в том, что мои записи не отображаются вертикально в пользовательском интерфейсе HTML. Вместо этого они заполняются слева направо. Вы можете помочь исправить?
ОБНОВЛЕННЫЙ СЦЕНАРИЙ ПРИЛОЖЕНИЯ:
function Review() {
var html = HtmlService.createTemplateFromFile('orderHistory').evaluate();
html.setHeight(600).setWidth(800);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Order History');
}
function htmlOrders() {
var active = SpreadsheetApp.getActive();
var sheet = active.getSheetByName("POHistory");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:A" + lastRow);
var data = myRange.getValues();
var optionsHTML = "";
for (var i = 0; i < data.length; i+=1) {
optionsHTML += "<tr>";
for(var j = 0; j < data[0].length; j++){
optionsHTML += "<td>" + data[i][j] + "</td>";
};
optionsHTML += "</tr>";
return optionsHTML;{
}
ОБНОВЛЕННЫЙ HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>PO Number</th>
<th>Vendor</th>
<th>Date</th>
<th>Total</th>
</tr>
<?!= htmlOrders(); ?>
</table>
</body>
</html>
Спасибо, Техховч. Я только что попробовал, и теперь все 3 моих записи появляются в одной ячейке чуть выше строки заголовка таблицы. Не уверен, что делаю не так.
Добавьте соответствующий новый фрагмент в конец сообщения, чтобы мы могли точно увидеть, как вы структурируете клиентский документ. Также включите бит HTML, оцененный на стороне клиента (используйте F12, чтобы открыть консоль браузера, и используйте средство выбора элементов, чтобы быстро найти таблицу
Tehhowch - Я добавил обновленный HTML-код в сообщение выше. Сообщите мне, что вы считаете ошибочным. Большое спасибо!
А клиентский HTML?
Я обновил указанное выше сообщение, чтобы отразить последнее обновление, которое я внес в часть кода APPS SCRIPT в файле, с которым я работаю.
Я упускаю что-то, что тебе нужно увидеть, Техховч?
Ответы 1
Обычно для построения таблицы из диапазона электронных таблиц требуется два цикла, один для строк (<tr>), другой для ячеек (<td>). Предполагая, что таблица должна иметь ту же форму (строки и столбцы), что и данные в электронной таблице, должно работать примерно следующее:
var tableData = '';
for(var i = 0; i < data.length; i++){
tableData += '<tr>';
for(var j = 0; j < data[0].length; j++){
tableData += '<td>' + data[i][j] + '</td>';
}
tableData += '</tr>';
}
Я думаю, что биты <td> могут быть в части data[i][0] функции htmlOutput() - вот почему я попросил также увидеть HTML-код на стороне клиента в моем комментарии выше.
@tehhowch: Чтобы быть уверенным в том, что OP должен поделиться образцом исходных данных.
Каждый из ваших параметров добавляется в строку, но вы также вставляете весь вывод в одну строку. Удалите
<tr>и</tr>, которые связывают<?!= htmlOrders(); ?>.