JSFiddle - React, Tailwind, and code Playground

by Mobeen Sarwar

HTML

<div class="col-sm-6 col-md-3 p0">
              <div class="fixed-table-toolbar">
                <div class="bars pull-left">
                  <div id="toolbar">
                    <select class="form-control input_billing" id="earning1">
                      <option value="">Earning</option>
                        <option value="70">70</option>                                           <option value="200">200</option>                                         <option value="0">0</option>
                        <option value="0">0</option>
                        <option value="0">0</option>
                        <option value="0">0</option>
                        <option value="0">0</option>

                    </select>
                  </div>
                </div>
                <div class="bars pull-left">
                  <div id="toolbar">
                    <select class="form-control input_billing" id="scoring1">
                      <option value="">Scoring</option>
                        <option value="125">125</option>                                         <option value="120">120</option>
                        <option value="0">0</option>
                        <option value="0">0</option>
                        <option value="0">0</option>
                        <option value="0">0</option>
                        <option value="0">0</option>
                    </select>
                  </div>
                </div>

                <button id="filter" class="btn btn-success" style="margin-top:8px;" type="button">Filter</button>
              </div>
            </div>
<table class="table table-condensed" id="mastermindTable">
  <thead>
                  <tr>
                    <th width="18%" align="left">Name</th>
                    <th width="26%" align="left">Email </th>
                    <th width="20%" align="left">Expertise</th>
                    <th width="16%" align="left">Earning</th>
                    <th...

JavaScript

$("#filter").click(function () {
  var tdScoring,tdEarning,hidden_rows=0;
  var scoring=$("#scoring1").val();
  var earning = $("#earning1").val();
  earning='$'+earning;
  table = document.getElementById("mastermindTable");
  tr = table.getElementsByTagName("tr");
  var rows=tr.length;
  rows-=2;
  if(scoring=='' && earning=='$'){
  document.getElementById('noRecordTR').style.display = "none";
    for (i = 2; i < tr.length; i++) {
    tr[i].style.display = "";
  }
  }
  else if(scoring!='' && earning=='$'){
  document.getElementById('noRecordTR').style.display = "none";
 for (i = 2; i < tr.length; i++) {
   tdScoring = tr[i].getElementsByTagName("td")[5];
   if (tdScoring) {
    if (tdScoring.innerHTML!=scoring) {
    tr[i].style.display = "none";
    }
    else{
    tr[i].style.display = "";
    }
  }

}

  }
   else if(earning!='$' && scoring==''){
  document.getElementById('noRecordTR').style.display = "none";
 for (i = 2; i < tr.length; i++) {
   tdEarning = tr[i].getElementsByTagName("td")[4];
   if (tdEarning) {
    if (tdEarning.innerHTML!=earning) {
    tr[i].style.display = "none";
    }
    else{
    tr[i].style.display = "";
    }
  }

}

  }
  else if(scoring!='' && earning!='$'){
  document.getElementById('noRecordTR').style.display = "none";
    for (i = 2; i < tr.length; i++) {
   tdScoring = tr[i].getElementsByTagName("td")[5];
   tdEarning = tr[i].getElementsByTagName("td")[4];
    if (tdScoring.innerHTML != scoring || tdEarning.innerHTML != earning ) {
    tr[i].style.display = "none";
    ++hidden_rows;
    }
    else{
    tr[i].style.display = "";
    }
}
if(hidden_rows==rows){
  document.getElementById('noRecordTR').style.display = "";
}
  }
 
});