Могу ли я добавить / выдвинуть значения html-элементов в каждую строку массива, сгенерированного из html-таблицы в форме? - PullRequest
1 голос
/ 25 мая 2019

Я делаю HTML-форму для онлайн-запросов пользователей.Форма имеет текстовые поля для ввода контактных данных пользователя (например, имя пользователя, отдел, адрес электронной почты и т. Д.) Вверху, а затем таблица с несколькими строками для различных запрашиваемых элементов.

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

Пробные формы Google - это хорошо для запросов одного элемента - одна форма Google для одного элемента.Но для нескольких запросов товаров одним и тем же пользователем пользователь должен вводить контактные данные повторно.Разветвление для повторения разделов в формах не работало, поскольку дополнительные элементы добавляются как новые столбцы, а не как новая строка.Таким образом я попробовал элементарную html форму.

FormTableDialog

Code.gs:

function addRows(valuesAll) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  sheet.getRange(sheet.getLastRow()+1,1,valuesAll.length,valuesAll[0].length).setValues(valuesAll);
}

Html:

<!DOCTYPE html>
<html>
  <head>
    <?!= include('CSS_Table'); ?>    
  </head>
  <body>
  Name: <input type="text" id="Name"><br>
  Phone: <input type="text" id="Phone"><br>
  Email: <input type="email" id="Email"><br>
  Department: <input type="text" id="Dept"><br>

    <table id="tableRows">
      <thead>
        <tr>
          <th>Item</th>
          <th>Description</th>
          <th>Quantity</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
        </tr>
        <tr>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
        </tr>
        <tr>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
        </tr>
        <tr>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
        </tr>
        <tr>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
          <td><input class="inputCell" type="text"></td>
        </tr>
      <tbody>
    </table>
    <div class="buttonBar">
      <input class="inputButton" type="button" value="Submit" onclick="buttonClick(this)">
      <input class="inputButton" type="button" value="Cancel" onclick="buttonClick(this)">
    </div>
    <?!= include('JS_Table'); ?>    
  </body>

JS_Table.html:

<script>
  function buttonClick(button) {
    if( button.value === "Submit" ) {
      var values = [];
      var table = document.getElementById("tableRows");
      for( var i=1; i<table.rows.length; i++ ) {
        values.push([]);
        var row = table.rows[i];
        for( var j=0; j<row.cells.length; j++ ) {
          var cell = row.cells[j].firstChild.value;
          values[i-1].push(cell)

       var user = ["Name","Phone","Email","Dept"];
       var valuesAll =  values.concat(user)
        }
      }
      google.script.run.addRows(valuesAll);
      google.script.host.close();
    }
    else {
      if( confirm("Exit without saving?") ) google.script.host.close();
    }
  }
</script>

Попытка просто объединить идентификаторы данных пользователя с массивом таблицы.Но скрипт Google не работает.Ценю любые предложения для этого новичка.

Стенограмма исполнения:

[19-05-25 19:42:15:580 PDT] Starting execution 
[19-05-25 19:42:15:587 PDT] SpreadsheetApp.getActiveSpreadsheet() [0 seconds
[19-05-25 19:42:15:672 PDT] Spreadsheet.getSheetByName([Sheet1]) [0.084 seconds] 
[19-05-25 19:42:15:772 PDT] Sheet.getLastRow() [0.099 seconds] 
[19-05-25 19:42:15:772 PDT] Sheet.getRange([2, 1, 9, 4]) [0 seconds] 
[19-05-25 19:42:15:779 PDT] Execution failed: Cannot convert Array to Object[][]. (line 17, file "Code") [0.189 seconds total runtime]

1 Ответ

0 голосов
/ 27 мая 2019

С кодом ОП есть две проблемы.
1 - вывод не настроен для двумерного диапазона Google. 2 - Имя, телефон, электронная почта и отдел не собираются.

Следующий ответ написан для работы на боковой панели (не обязательно) и также проверяет, являются ли данные формы полными, то есть: есть ли полные данные для Позиции, Описание, Количество и Расположение в каждой строке. ОП может легко удалить этот тест.

56302393_04_gs.gs


function showSidebar04() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile("56302393_04_html");
  htmlOutput.setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle("56302393_04 Form");
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

function addRows04(valuesAll) {  
  //Logger.log("DEBUG: valuesall = "+valuesAll);
  var testdata = [];
  var testdata = valuesAll.slice(0);
  // Logger.log("DEBUG: testdata = "+testdata);

  // remove the name fields
  testdata.splice(0, 4);
  // get the number of fields 
  var testdatalength = (testdata.length);
  // Logger.log("DEBUG: testdata length = "+testdatalength);
  // get the number of empty fields - were looking for rows that are inclonplete
  var newempties = testdatalength - testdata.filter(String).length;
  var adjustedlength = testdatalength-newempties;
  //Logger.log("DEBUG: newempties = "+newempties+", so adjusted length = "+adjustedlength);

  // calculate the number of rows
  var netrows = adjustedlength/4;
  // Logger.log("DEBUG: adjusted length divided by 4 = "+netrows);
  // is the result an integers - get the mod
  var netrowMod = adjustedlength % 4;
  // Logger.log("DEBUG: residual = "+netrowMod);
  // test whether newrows is an integer by testing whether mode = 0
  if(netrowMod !== 0){
    // Logger.log("DEBUG: netrows: "+netrows+" is not an integer");
    Browser.msgBox("The data rows were not completed evenly. Code aborted");
    return;
  }

  // setup the spreadsheet
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheetname = "Sheet1";
  var sheet = ss.getSheetByName("Sheet1");
  var lastrow = sheet.getLastRow();

  // get the name data
  var name = valuesAll[0];
  var phone = valuesAll[1];
  var email = valuesAll[2];
  var dept = valuesAll[3];

  // set the range
  var outputRange = sheet.getRange(lastrow+1,1,netrows,8);
  // Logger.log("DEBUG Output range = "+range.getA1Notation());

  var datastart = 4;
  var alldata = [];

  for (var i = 0; i<netrows;i++){
    var datarow = []; 

    // get the row information
    var item = valuesAll[(i*datastart)+4];
    var desc = valuesAll[(i*datastart)+5]
    var qty = valuesAll[(i*datastart)+6];
    var locn = valuesAll[(i*datastart)+7];
    // Logger.log("DEBUG: i="+i+", values = "+item+" "+desc+" "+qty+" "+locn);
    // build the row fields
    datarow.push(item);
    datarow.push(desc);
    datarow.push(qty);
    datarow.push(locn);
    datarow.push(name);
    datarow.push(phone);
    datarow.push(email);
    datarow.push(dept);

    // accumulate the rows 
    alldata.push(datarow);
    //Logger.log("DEBUG: datarow = "+datarow)
    //Logger.log("DEBUG: alldata = "+alldata)
  }
  // update the values of the outputrange
  outputRange.setValues(alldata);
}

56302393_04_html.html


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <table id="tableName">
  <tbody>
  <tr><td>Name:</td><td> <input type="text" name="name" value="Fred"></td></tr>
  <tr><td>Phone: </td><td><input type="text" name="phone" value="0412987654"></td></tr>
  <tr><td>Email: </td><td><input type="email" name="email" value="fred@example.com"></td></tr>
  <tr><td>Department: </td><td><input type="text" name="dept" value="Sydney"></td></tr>
  </tbody>
  </table>
<style>
  .inputCell { float: right; width: 40%; }
  .inputCell { float: left; width: 80%; }
  .inputButton { float: left; width: 50%; }
</style>
    <table id="tableRows">
      <thead>
        <tr>
          <th>Item</th>
          <th>Description</th>
          <th>Quantity</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
     <tr>
       <td><input class="inputCell" type="text" value="1"></td>
       <td><input class="inputCell" type="text" value="amd"></td>
       <td><input class="inputCell" type="text" value="11"></td>
       <td><input class="inputCell" type="text" value="B12"></td>
     </tr>
     <tr>
       <td><input class="inputCell" type="text" value="2"></td>
       <td><input class="inputCell" type="text" value="ibm"></td>
       <td><input class="inputCell" type="text" value="22"></td>
       <td><input class="inputCell" type="text" value="Z23"></td>
     </tr>
     <tr>
       <td><input class="inputCell" type="text" value="3"></td>
       <td><input class="inputCell" type="text" value="digital"></td>
       <td><input class="inputCell" type="text" value="33"></td>
       <td><input class="inputCell" type="text" value="A49"></td>
     </tr>
     <tr>
       <td><input class="inputCell" type="text" value="4"></td>
       <td><input class="inputCell" type="text" value="apple"></td>
       <td><input class="inputCell" type="text" value="44"></td>
       <td><input class="inputCell" type="text" value="K12"></td>
     </tr>
     <tr>
       <td><input class="inputCell" type="text" value="5"></td>
       <td><input class="inputCell" type="text" value="rex"></td>
       <td><input class="inputCell" type="text" value="55"></td>
       <td><input class="inputCell" type="text" value="ascot"></td>
     </tr>
      <tbody>
    </table>
    <div class="buttonBar">
      <input class="inputButton" type="button" value="Submit" onclick="buttonClick(this)">
      <input class="inputButton" type="button" value="Cancel" onclick="buttonClick(this)">
    </div>
<script>
  function buttonClick(button) {
    if( button.value === "Submit" ) {

      var valuesAll = [];

      // Collect name details
      var tablename = document.getElementById("tableName");
      var myname = tablename.rows[0].cells[1].children[0].value
      var myphone = tablename.rows[1].cells[1].children[0].value
      var myemail = tablename.rows[2].cells[1].children[0].value
      var mydept = tablename.rows[3].cells[1].children[0].value

      valuesAll.push(myname);
      valuesAll.push(myphone);
      valuesAll.push(myemail);
      valuesAll.push(mydept);


      // collect row details
      var table = document.getElementById("tableRows");

      for( var i=1; i<table.rows.length; i++ ) {
        var row = table.rows[i];
        for( var j=0; j<row.cells.length; j++ ) {
          var cell = row.cells[j].firstChild.value;
          valuesAll.push(cell);
        }
      }
      google.script.run.addRows04(valuesAll);
      google.script.host.close();
    }
    else {
      if( confirm("Exit without saving?") ) google.script.host.close();
    }
  }
</script> 
  </body>

Снимок экрана вывода
Output screenshot

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...