如何使用 Apps 脚本向 HTML Table 添加选项？

Question

我想知道如何将这些选项添加到 Apps 脚本编辑器中的 HTML table。

脚本如下：

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

/* PROCESS FORM */
function processForm(formObject) {
  var result = "";
  if (formObject.searchtext) {//Execute if form passes search text
    result = search(formObject.searchtext);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS 

function search(searchtext) {
  //const searchtext = 'test@email.com'
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  var spreadsheetId = ss.getId();
  var dataRage = 'Approval Tracker!A2:J';
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
  var ar = [];

  data.forEach(function (f) {
    if (f[9] == searchtext) {
      ar.push([f[3], f[4], f[5], f[6], f[2]]);
    }
  });
  return ar;
}

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
    integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>

  <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
  <script>
    //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
            }
          }
          window.addEventListener("load", preventFormSubmit, true); 
              
           
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            //document.getElementById("search-form").reset();
          }
         
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
                           "<thead style='white-space: nowrap'>"+
                             "<tr>"+                               //Change table headings to match witht he Google Sheet
                              "<th scope='col'>Date Assigned</th>"+
                              "<th scope='col'>Item</th>"+
                              "<th scope='col'>Link To File</th>"+
                              "<th scope='col'>Notes</th>"+
                              "<th scope='col'>Approval Status</th>"+
                              "<td><select name='D1'>" +
                                                            "<option value='volvo'>Volvo</option>" +
                                                            "<option value='saab'>Saab</option>" +
                                                            "<option value='mercedes'>Mercedes</option>" +
                                                            "<option value='audi'>Audi</option>" +
                                                            "</select>"+
                              "</td>" +
                              "</tr>" +
                              "</thead>";
              for(var i=0; i<dataArray.length; i++) {
                  result += "<tr>";
                  for(var j=0; j<dataArray[i].length; j++){
                      result += "<td>"+dataArray[i][j]+"</td>";
                  }
                  result += "</tr>";
              }
              result += "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data not found!";
            }
          }
  </script>
  <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->

</head>

<body>
  <div class="container">
    <br>
    <div class="row">
      <div class="col">

        <!-- ## SEARCH FORM ------------------------------------------------ -->
        <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
          <div class="form-group mb-2">
            <label for="searchtext">Enter your email</label>
          </div>
          <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Enter your email">
          </div>
          <button type="submit" class="btn btn-primary mb-2">Search</button>
        </form>
        <!-- ## SEARCH FORM ~ END ------------------------------------------- -->

      </div>
    </div>
    <div class="row">
      <div class="col">

        <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
        <div id="search-results" class="table-responsive">
          <!-- The Data Table is inserted here by JavaScript -->
        </div>
        <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->

      </div>
    </div>
  </div>
</body>

</html>

This is the file's link:

This is the Web App URL

现在正在向 header 添加一个选项列表。

感谢任何帮助！

Answer 1

来自I've tried it above but the page is empty.，如果您正在使用您的展示脚本，我认为您的脚本不完整。所以，请修改如下，再测试一下

发件人：

  "<option value='audi'>Audi</option>" +
  "</select></td>
"</tr>" +
  "</thead>";

收件人：

"<option value='audi'>Audi</option>" +
"</select></td></tr></thead>";

如何使用 Apps 脚本向 HTML Table 添加选项？

How to add options to an HTML Table using Apps Script?

html

google-apps-script

发件人：

收件人：