Перенос таблицы HTML (пользовательский ввод) на листы Google - PullRequest
Новая
       42

Перенос таблицы HTML (пользовательский ввод) на листы Google

0 голосов
/ 12 апреля 2019

Я хочу перенести некоторые пользовательские входные данные со страницы html на мой лист Google с помощью скриптов приложения Google.Я могу сделать это для отдельных значений, но не могу найти хороший способ сделать это для таблицы.Таблица будет динамически создаваться пользователем (фиксированное количество столбцов и динамическое количество строк).

Ниже приведен код, показывающий пример для одного значения и в котором отсутствует решение для всей таблицы.

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

Веб-интерфейс HTML: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

  <!-- Get the user name -->
  <label>Name:</label><input type="text" id="username">

  <!-- Get the table data -->
  <table class="table table-bordered" id="tbl_posts">
        <thead>
          <tr>
            <th>#</th>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>
          </tr>
        </thead>
        <tbody id="tbl_posts_body">
          <tr id="rec-1">
            <td><span class="sn">1</span>.</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
          </tr>
        </tbody>
        <tbody id="tbl_posts_body">
          <tr id="rec-2">
            <td><span class="sn">1</span>.</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
          </tr>
        </tbody>
      </table>

    <button id="sendbutton"> Send </button>

    <script>

    document.getElementById("sendbutton").addEventListener("click",parse_to_backend);

    function parse_to_backend(){

      // transfer the username
      var name = document.getElementById("username").value;
      google.script.run.TransferUsername(name);

      // transfer the table data 

      // HERE I NEED SOME CODE

    };

   </script>

  </body>
</html>

Сервер JS: 

function doGet() {

  return HtmlService.createHtmlOutputFromFile("FrontEndScript");

}


function TransferUsername(name){

  var URL = "https://docs.google.com/spreadsheets/...";
  var Spreadsheet = SpreadsheetApp.openByUrl(URL);
  var Worksheet = Spreadsheet.getSheetByName("Data");
  Worksheet.appendRow([name,]);

}

function TransferTabledata(tabeldata){

  var URL = "https://docs.google.com/spreadsheets/...";
  var Spreadsheet = SpreadsheetApp.openByUrl(URL);
  var Worksheet = Spreadsheet.getSheetByName("Data");

  // Here i need some code

}

1 Ответ

2 голосов
/ 12 апреля 2019

Вы можете использовать Sheets API для непосредственного анализа и вставки HTML.

FrontEnd.html Фрагмент: 

let table = document.getElementById('tbl_posts').outerHTML;
google.script.run.pasteHtml(table);

Code.gs Фрагмент: 

function pasteHtml(table) {
  var ss = SpreadsheetApp.getActive();
  var req = {
    requests: [
      {
        pasteData: {
          html: true,
          data: table,
          coordinate: {
            sheetId: ss.getSheets()[1].getSheetId(), //second sheet!A1
            rowIndex: 0,
            columnIndex: 0,
          },
        },
      },
    ],
  };
  Sheets.Spreadsheets.batchUpdate(req, ss.getId());
}

Читать:

...