如何在Javascript中创建与Google电子表格连接的多个过滤器_Javascript_Google Apps Script_Google Sheets_Filter

如何在Javascript中创建与Google电子表格连接的多个过滤器

javascript google-apps-script google-sheets filter

如何在Javascript中创建与Google电子表格连接的多个过滤器,javascript,google-apps-script,google-sheets,filter,Javascript,Google Apps Script,Google Sheets,Filter,如果我从谷歌电子表格中提取数据，如何在Javascript中进行多重筛选 GS代码 var getTable = function(){ var url = "someURL"; var script = SpreadsheetApp.openByUrl(url); var temp = HtmlService.createTemplateFromFile("table"); var html = temp.evaluate().s

如果我从谷歌电子表格中提取数据，如何在Javascript中进行多重筛选

GS代码


var getTable = function(){
  var url = "someURL";
  var script = SpreadsheetApp.openByUrl(url);
  
  var temp = HtmlService.createTemplateFromFile("table");
  var html = temp.evaluate().setWidth(1200).setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(html,"Leave Application");

}

var include = function(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

  var getTableData = function(){
  var url = "SomeURL";
  var script = SpreadsheetApp.openByUrl(url);
  var ss = script.getSheetByName("Script");
  var data = ss.getRange(2,2,ss.getLastRow()-1,9).getDisplayValues();

  return data;
}

HTML代码：

<head>
<?!= include("table-css");?>
</head>
<body>
            <div>  
               <select id="name">
                    <option disabled selected>Choose Name</option>
                    <option>John</option>
                    <option>Doe</option>
                    <option>Jane</option>
                </select>
               <label>Name Selection</label>
            </div>
      
            <div  class="input-field col s3 right">
               <div> 
               <i id="pending" class="material-icons i1">label_outline</i> 
               <i id="approve" class="material-icons i2">done_all</i>
               <i id="reject" class="material-icons i3">clear</i>
               <i id="notify" class="material-icons i4">error</i>
               
            </div>

          <div>
          <table style="width:100%" id="myTable";>

            <thead>
              <tr>
                <th>Name</th>
                <th>Type of Leave</th>
                <th>From</th>
                <th>Until</th>
                <th>Status</th>
              </tr>
            </thead>

            <tbody id="table-body">
              
            </tbody>

          </table>
        </div>

getTableData（）只是GS代码中的一个函数，用于从电子表格返回数据

它将如下所示：

然后我用这个来启动过滤器

name.onchange = function(){
        
     for(var i=1; i<table.rows.length; i++){
          if(table.rows[i].cells[0].textContent === this.value){
            console.log(table.rows[i].cells[0].textContent);
            table.rows[i].style.display = "";

          }else{
            table.rows[i].style.display = "none";
          }
      }
  } 

var pending = document.getElementById("pending");
    pending.onclick = function(){
      for(var i=1; i<table.rows.length; i++){
          if(table.rows[i].cells[4].textContent === "Pending"){
             table.rows[i].style.display = "";
             }else{
            table.rows[i].style.display = "none";
             }
          }    
    }

name.onchange=function（）{
对于（var i=1；iplace使用内置图像上传器。外部图像不稳定。您不能简单地将这两个条件与&
运算符结合起来吗？如何检索所选状态？我假设它设置为某个DOM元素的值？很难说，因为您没有提供html代码。请阅读您刚刚访问的答案中的链接pted.Do父元素上的事件委派按照ziganotschka的建议执行&。@ziganotschka.对不起，我不太明白。使用&&运算符是什么意思？它是同时合并.onchange&&.onclick还是只合并条件？我试图做的是，如果我首先筛选Doe的名称，它应该显示Doe的数据和表应该保持这样，然后如果我单击状态过滤器图标（将状态过滤器设置为挂起），表中应该不会显示任何内容，因为没有Doe状态挂起的数据。顺便说一下，我还编辑了HTML代码。我的意思是组合条件。如果您能提供足够完整的示例代码来呈现一个正常运行的网页，这将非常有用。
name.onchange = function(){
        
     for(var i=1; i<table.rows.length; i++){
          if(table.rows[i].cells[0].textContent === this.value){
            console.log(table.rows[i].cells[0].textContent);
            table.rows[i].style.display = "";

          }else{
            table.rows[i].style.display = "none";
          }
      }
  } 

var pending = document.getElementById("pending");
    pending.onclick = function(){
      for(var i=1; i<table.rows.length; i++){
          if(table.rows[i].cells[4].textContent === "Pending"){
             table.rows[i].style.display = "";
             }else{
            table.rows[i].style.display = "none";
             }
          }    
    }