省略沒有值的字段

Question

我需要從 Google 表格中發布考試結果。 如果在框中提供卷號，則搜索按鈕顯示完美獲得的標記，但我需要從 html 頁面的文本框中省略沒有值的字段，例如主題 3、5 等

這是我正在使用的工作表和我正在使用的代碼......

 function doGet(e) { return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } //Search for the id and return the array for that row function search(id) { var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/16IH3yKJjLwM9XA0c4_BN5MVQSKh8hV7gR6_kLLfe8to/edit#gid=0"); var sheet = ss.getSheetByName("Sheet1"); var values = sheet.getDataRange().getValues().filter(function(row) { return row[0] == id; }); return values[0]; }

 <.DOCTYPE html> <html> <head> <base target="_top"> <style>:hidden { display;none. } </style> </head> <body> <input type="text" id="txtName"/> <button id="show">SHOW</button> <h1>FMATS</h1> Name <input type="text" id="name"/><br> Roll <input type="text" id="roll"/><br> Subject 1 <input type="text" id="sub1"/><br> Subject 2 <input type="text" id="sub2"/><br> Subject 3 <input type="text" id="sub3"/><br> Subject 4 <input type="text" id="sub4"/><br> Subject 5 <input type="text" id="sub5"/><br> </body> <script> //When click on show button it will run search function window.onload = function(e){ document.getElementById('show'),addEventListener('click'; search). } //Get the value for txtName input and run search function in code.gs function search() { var txtName = document.getElementById('txtName');value. google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) });search(txtName). } //It will run when a success response comes from search function in code.gs and updates the input with the sheet info function fillInfo(values) { document.getElementById('name');value = values[1]. document.getElementById('roll');value = values[0]; for (var i=0.i<values;length-2;i++) { if (values[i+2]==null) { toggleElement("sub"+i). } else { document.getElementById("sub"+i);value = values[i+2]. } } //rest of the code here document.getElementById('name');value = values[1]. document.getElementById('roll');value = values[0]. document.getElementById('sub1');value = values[2]. document.getElementById('sub2');value = values[3]. document.getElementById('sub3');value = values[4]. document.getElementById('sub4');value = values[5]. document.getElementById('sub5');value = values[6]; } </script> </html>

我需要忽略 HTML 頁面中沒有值的主題名稱和文本框。 如果搜索到不在表格中的卷，則應顯示“未找到任何內容”。 這不是必需的，但如果主題名稱來自工作表的第 1 行會很好。

我應該怎么辦？

Answer 1

go 關於這個有兩種方法：

在服務器端創建您的 HTML（如@Cooper所說）
使用 JavaScript 操作您的 HTML

要在服務器端創建 HTML，您可以使用字符串並自動“寫入” html。

然后你的函數將是這樣的：

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(response) {
  document.getElementById("divid").innerHTML=html
});

如果您絕對想在客戶端操作 HTML，您將使用如下內容：

function toggleElement(id) {
  var td = document.getElementById(id).parentElement;
  var tr = td.parentElement;
  tr.classList.toggle("hidden");
}

用法是這樣的：

function fillInfo(values) {
  document.getElementById('name').value = values[1];
  document.getElementById('roll').value = values[0];
  for (var i=0;i<values.length-2;i++) {
    if (values[i+2]==null) {
      toggleElement("sub"+i);
    } else {
      document.getElementById("sub"+i).value = values[i+2];
    }
  }  
  //rest of the code here
}

然后你將有一些 css 這樣做：

.hidden {
  display:none;
}

編輯：

這是您實施第一個解決方案的方式：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <input type="text" id="txtName"/>
  <button id="show">SHOW</button>
  <h1>FMATS</h1>
  <div id="dataDiv"></div>
  </body>
<script>
//When click on show button it will run search function
window.onload = function(e){ 
  document.getElementById('show')
    .addEventListener('click', search);
}

//Get the value for txtName input and run search function in code.gs
function search() {
  var txtName = document.getElementById('txtName').value;
  google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
  console.log(values);
  document.getElementById("dataDiv").innerHTML=values
}
</script>
</html>

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
       .setSandboxMode(HtmlService.SandboxMode.IFRAME)
       .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

//Search for the id and return the array for that row
function search(id) {
  var ss = SpreadsheetApp.openByUrl("SHEETS URL");
  var sheet = ss.getSheetByName("Sheet1");
  var values = sheet
  .getDataRange()
  .getValues()
  .filter(function(row) {
    return row[0] == id;
  })[0];
  var legends = sheet.getRange(1,1,1,sheet.getMaxColumns()).getValues()[0];
  return createHTML(legends, values);
}

function createHTML(legends, values) {
  Logger.log(legends);
  var htmlResult = "";
  for (var i=0; i<values.length; i++) {
    if (values[i]!=null && values[i]!=="") {
      htmlResult += '<div class="field">' + (legends[i]+"").replace("Sub", "Subject ") + '<input type="text" id="sub1" value="'+values[i]+'"></div>';
    }
  }
  return htmlResult;
}

希望這可以幫助！

Answer 2

這是您的問題的完整解決方案的一個簡單示例，主要在服務器端完成。

我喜歡這樣做，因為我喜歡能夠使用 Utilities.formatString()。

服務器功能：文件：aq3.gs：

function search(sObj) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var hA=vA[0];
  var dObj={dA:[]};
  for(var i=1;i<vA.length;i++) {
    if(vA[i][0]==sObj.roll) {
      var row=vA[i];
      for(var j=0;j<hA.length;j++) {
        dObj[hA[j]]=row[j];
      }
      break;
    }
  }
  var html="<style>input{margin:2px 5px 0 2px}</style>";
  for(var i=0;i<row.length;i++) {
    if(dObj[hA[i]]) {
      html+=Utilities.formatString('<br /><input id="txt-%s" type="text" value="%s" /><label for="txt-%s">%s</label>',i,dObj[hA[i]],i,hA[i]);
    }
  }
  sObj['results']=html;
  return sObj;
}

運行下面的 function 以使對話框運行。 在搜索框中輸入您希望查看的卷，然后單擊搜索按鈕。 你只會得到有數據的盒子。

function launchExamResultsSearchDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('aq5');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Exam Results");
}

html：文件：aq5.html：

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    function search() {
      var text=$('#srchtext').val();
      google.script.run
      .withSuccessHandler(function(sObj) {
        document.getElementById("results").innerHTML=sObj.results;
      })
      .search({roll:text});
    }

    console.log("My Code");
  </script>
  </head>  
  <body>
    <input type="text" id="srchtext" /><input type="button" value="Search" onClick="search();" />
    <div id="results"></div>
  </body>
</html>

這是對話框的樣子：

您可以繼續更改搜索卷編號，對話框將用新數據替換數據。 您可以通過更改標題來控制主題。