使用来自 Google Apps 脚本的过滤器显示表格数据

Question

I have a data table which is getting complete date as I have from the spreadsheet.

<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>

/* requirement */

Now I wanted to get the data from "inventorydataTable" using filters on UI like if I select only for "US" than table should show for the "US" market data.

Answer 1

Sample how to filter rows HTML side

You need to create a filter functionality consisting of two steps:

1.Create an input field where the user inserts a string to filter for (eg US) and bind an onkeyup event listener to it.

Sample:

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

2. Write funciton filterRows() to apply the filter to the column of your choice (the one where you expect to find US )

Sample:

         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";
                 }
             }
         }

References:

• eventListener
• getElementsByTagName
• Style display Property