使用來自 Google Apps 腳本的過濾器顯示表格數據

Question

我有一個數據表，它正在從電子表格中獲取完整的日期。

<script>

function createTable(dataArray) {

    if(dataArray){
    
      var result = "<table class='table table-sm' style='font-size:0.8em'>"+

                   "<thead style='white-space: nowrap'>"+

                     "<tr>"+        //Change table headings to match with he Google Sheet
                      "<th scope='col'>Delete</th>"+

                      "<th scope='col'>Edit</th>"+

                      "<th scope='col'>ID</th>"+
                      "<th scope='col'>Type</th>"+
                      "<th scope='col'>serial</th>"+
                      "<th scope='col'>ssbarcode</th>"+
                      "<th scope='col'>market</th>"+
                      "<th scope='col'>program</th>"+

                      "<th scope='col'>owner</th>"+
                      "<th scope='col'>condition</th>"+
                      "<th scope='col'>active</th>"+
                      
                    "</tr>"+
                  "</thead>";
      for(var i=0; i<dataArray.length; i++) {
          result += "<tr>";
          result += "<td><button type='button' class='btn btn-danger btn-xs deleteBtn' onclick='deleteData(this);'>Delete</button></td>";
          result += "<td><button type='button' class='btn btn-warning btn-xs editBtn' onclick='editData(this);'>Edit</button></td>";
          for(var j=0; j<dataArray[i].length; j++){
              result += "<td>"+dataArray[i][j]+"</td>";
          }
          result += "</tr>";
      }
      result += "</table>";
      var div = document.getElementById('inventorydataTable');
      div.innerHTML = result;
      document.getElementById("message").innerHTML = "";
    }else{
      var div = document.getElementById('inventorydataTable');
      div.innerHTML = "Data not found!";
    }
  }
</script>

/* 要求 */

現在，我想使用 UI 上的過濾器從“inventorydataTable”中獲取數據，例如我的 select 僅適用於“美國”，而不是表應該顯示“美國”市場數據。

Answer 1

示例如何過濾行 HTML 端

您需要創建一個包含兩個步驟的過濾器功能：

1.創建一個輸入字段，用戶在其中插入要過濾的字符串（例如 US），並將onkeyup事件偵聽器綁定到它。

樣本：

 <input type="text"  id="myFilter" onkeyup="filterRows()">';

2. 編寫filterRows()以將過濾器應用於您選擇的列（您希望找到US的列）

樣本：

         function filterRows(a) {
             var table = document.getElementById("ID OF YOUR TABLE");
             var tr = table.getElementsByTagName("tr");
             var length = tr.length;
             // specify the column on which you want to perform the filtering:
             var columnNumber = 2;
             var searchField = document.getElementById("myFilter");
             var filter = searchField.value;
             // Loop through all table rows, and hide those who don't match the search query
             for (var i = 0; i < tr.length; i++) {
                 var td = tr.getElementsByTagName("t")[columnNumber];
                 var  input = td.innerHTML;
                 if (input && input.indexOf(filter) > -1) {
                     tr[i].style.display = "";
                 } else {
                     tr[i].style.display = "none";
                 }
             }
         }

參考：

• 事件監聽器
• getElementsByTagName
• 樣式顯示屬性