Filter table select

Select component with filtering table rows

by humanzing

HTML

<select id="select">
      <option>No filter</option>
      <option data-filter='[{"column":3,"filter":"E"},{"column":2,"filter":"Yes"}]'>Filter Label E and Available</option>
      <option data-filter='[{"column":3,"filter":"F"},{"column":2,"filter":"Yes"}]'>Filter Label F and Available</option>
      <option data-filter='[{"column":2,"filter":"btc"}]'>btc</option>
      <option data-filter='[{"column":3,"filter":"F"}]'>Filter Label F</option>
      <option data-filter='[{"column":2,"filter":"No"}]'>Filter Not Available</option>
    </select>  

    <table id="table">
      <tr>
        <td>1</td><td>One</td> <td>btc</td><td>E</td>
      </tr>  
      <tr>
        <td>2</td><td>Two</td> <td>Yes</td><td>F</td>
      </tr>  
      <tr>
        <td>3</td><td>Two</td> <td>No</td><td>F</td>
      </tr>
      <tr>
      <td>4</td><td>Three</td> <td>No</td><td>E</td>
      </tr>
    </table>

JavaScript

var FilterSelect=function(selectSelector,tableSelector){

   this.$select=document.querySelector(selectSelector);//our select
   this.$table=document.querySelector(tableSelector); //our table
   
   this.filter=null; //filter value - array
  
   this._bind();
  
   
   //run setting and filtering in beginning ( option can be set )
   this._setAndFilter();

};



// method sets parameters from chosen option
FilterSelect.prototype._set=function(){

      var option=this.$select.options[this.$select.selectedIndex];//get current option
    this.filter=typeof option.dataset.filter!='undefined'?JSON.parse(option.dataset.filter):null;
    
  
};

//method filters table
FilterSelect.prototype._filterTable=function(){

  var trs=this.$table.querySelectorAll("tr");
  
  for (var i=0; i<trs.length; i++){
    
    
      var tr=trs[i];
    
      if (this.filter==null){
      
        //no filters
        tr.style.display="block"
        continue;
      }
    
      var show=true;
      for (var j=0; j<this.filter.length; j++){
      
        var td=tr.querySelectorAll("td")[parseInt(this.filter[j].column)];//get td 
    
        var value=td.innerText;//get td inner text to compare

        show=show&&value==this.filter[j].filter;//join conditions
          
      }
      
      if (!show)
          tr.style.display="none"; //filter does not match - hide
        else
          tr.style.display="block";//display block - filter match
      
  }
  
};

//filtering table and setting options
FilterSelect.prototype._setAndFilter=function(){

   this._set();//set current filter and column
   this._filterTable();//do table filtering
  
};

//bind select change event
FilterSelect.prototype._bind=function(){

  this.$select.addEventListener("change",function(){
  

    this._setAndFilter();
    
    
  }.bind(this));
  
  

};

//usage
var filterSelect=new FilterSelect('#select','#table');