How to filter an html table based on drop down selected value?

Question

I have a html table with some rows of data which has a column called status. There are three status they are In progress, To do, Completed. I have a drop down at the top. The drop down contains Any,In progress, To do, Completed. How can I load the data based on the selected drop down value. Here below I have attached an image of my page.

My code is here below. Table data is coming from database.

<div class="table-wrapper">
    <div class="table-title">
    </div>
        <div class="table-filter">
            <div class="row">
                <div class="col-sm-3">
                    <div class="show-entries">
                        <span>Show</span>
                        <select class="form-control">
                            <option>5</option>
                            <option>10</option>
                        </select>
                        <span>entries</span>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="filter-group">
                        <label>Status</label>
                        <select class="form-control">
                            <option>Any</option>
                            <option>Completed</option>
                            <option>In Progress</option>
                            <option>To Run</option>
                        </select>
                    </div>
                <span class="filter-icon"><i class="fa fa-filter"></i></span>
                </div>
            </div>
        </div>
    <form method="post" action="activeInactive.php">
        <table class="paginated table table-striped table-hover">
            <thead>
                <tr>
                    <th>Test Name</th>
                    <th>Created By</th>
                    <th>Last updated</th>
                    <th>Test status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="test_table">

                <?PHP

                $test_access = 0;
                while($row = mysqli_fetch_array($tests_under_user)){    
                    echo '<td width=250px; title="'.$testName.'"><a href="">'.$row['name'].'</a></td>';
                    echo '<td title="'.$row['created'].'">'.$row['created'].'</td>';
                    echo '<td title="'.$row['edited'].'">'.$row['edited'].'</td>';
                    echo '<td>In Progress</td>';
                    echo '<td>';
                    echo '<a href="" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>';   
                    echo '<a href="" class="delete" name="delete" data-toggle="modal" Onclick="return ConfirmDelete()"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>';
                    echo '<a href="" class="copy" name="copy" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Copy" style="color: #2874A6">file_copy</i></a>';
                    echo '</td>';
                }
                ?>
            </tbody>
        </table>
    </form>
</div>

Answer 1

This may help you.

Visit here to try filtering with select tag.

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#mylist {
  
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

<h2>My Customers</h2>
<select id="mylist" onchange="myFunction()" class='form-control'>
<option>A</option>
<option>b</option>
<option>c</option>
</select>


<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

Answer 2

Since you have lots of data, the best way to go is by making a call to the server and filter the data on the SQL level.

This way you can ask the server for a specific page and your filter parameters and get only that data, making the response time a lot smaller.

Additionally, you don't have to worry about any filtering logic in the client side. You just show the data you receive from the server.

---

Update:

If you insist on doing the work on the client side, you first need to realize that the part inside of <?PHP ?> is rendered on the server side.

In this case, you need to get all the data from the server into something you can run filtering logic on like a JavaScript object (usually using AJAX to get JSON data).

After you got the data and filtered it you can use JavaScript to dynamically create the table rows and update the pagination data.

There are numerous JavaScript libraries and frameworks for making AJAX calls and for templating (e.g. Angular, React and Vue), but you can also do it yourself with vanilla JavaScript (see AJAX, createElement and removeChild).

---

Note

While Aman Deep's answer was helpful, there are a cases in which it is lacking:

1. When you have more than one page of results you can't just change the display property. You will also need some mechanism to get results from the next pages.
2. If you have some CSS that is applied to even lines, once you filter using the display property your rendered result might be messed up (see example).