title: How to filter html table using javascript without reloading the page?
body: <p>I have these codes already working using plain javascript and got it in W3schools which filtering table data using input text. I added a Select dropdown for filtering table. I've found some answers here but its not working to my codes. </p>
  
  <p>I tried using Jquery but its not working. JQUERY CDN is located at the header</p>
  
  <pre><code> &lt;head&gt;
     &lt;script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt; 
     &lt;/script&gt;
    &lt;/head&gt;
  
     &lt;table class="table table-bordered" id = "tbl_main_content"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th style = "display: none;"&gt;Description&lt;/th&gt;
                  &lt;th&gt;Category&lt;/th&gt;
                  &lt;th style = "display: none;"&gt;Status&lt;/th&gt;
                  &lt;th width="400px"&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  
   //my input
   &lt;input type="text" class="form-control" id="txt_list_search" 
   placeholder="Enter keyword..."  onkeyup="myFunction()"&gt;
  
   //my select
  &lt;select class="form-control" id = "sort"&gt;
  &lt;option &gt;Select Sort&lt;/option&gt;
  &lt;option value = "HTML"&gt;Html&lt;/option&gt;
  &lt;option value = "JAVASCRIPT"&gt;Javascript&lt;/option&gt;
  &lt;option value = "CSS"&gt;Css&lt;/option&gt;
  &lt;option value = "PHP"&gt;PHP&lt;/option&gt;
  &lt;option value = "LARAVEL"&gt;Laravel&lt;/option&gt;
  &lt;option value = "AJAX"&gt;Ajax&lt;/option&gt;
  &lt;/select&gt;
  
   &lt;script&gt;
     function myFunction() 
      {
      var input, filter, table, tr, td, i, txtValue; 
      input = document.getElementById("txt_list_search");
      filter = input.value.toUpperCase();
      table = document.getElementById("tbl_main_content");   
      tr = table.getElementsByTagName("tr");  
      for (i = 0; i &lt; tr.length; i++)
          {
              td = tr[i].getElementsByTagName("td")[0];
              if (td) 
                  {
                      txtValue = td.textContent || td.innerText;
                      if (txtValue.toUpperCase().indexOf(filter) &gt; -1)
                          {
                              tr[i].style.display = "";
                          } else {
                                   tr[i].style.display = "none";
                                  }
                  }       
          }
      }
  
     var options = $("#sort");
     $("#tbl_main_content tr:not(.header)").each(function() {
     options.append($("&lt;option /&gt;").val($(this).find("td:first- 
     child").text()).text($(this).find("td:first-child").text()));
     });
  
     $("#txt_list_search").on('input', function() {
     myFunction($(this).val());
     });
  
     $("#sort").on('change', function() {
     myFunction($(this).val());
     });
     &lt;/script&gt;
  
       // AJAX METHOD TO DISPLAY DATA FROM DB
       &lt;script&gt;
       getPageData();
       function getPageData() {
       $.ajax({
       dataType: 'json',
       url: url,
       data: {page:page}
       }).done(function(data){
       manageRow(data);
           });
       }
  
       function manageRow(data) {
       console.log(data)
       var    rows = '';
       $.each( data, function( key, value ) {
       rows = rows + '&lt;tr&gt;';
       if(value.status == 0){
       rows = rows + '&lt;td style = "color: #FF0000"&gt;'+value.title+'&lt;/td&gt;';
       } else{
       rows = rows + '&lt;td style = "color: #000"&gt;'+value.title+'&lt;/td&gt;';
       }
       rows = rows + '&lt;td style = "display: none;"&gt;'+value.details+'&lt;/td&gt;';
       rows = rows + '&lt;td&gt;'+value.category+'&lt;/td&gt;';
       rows = rows + '&lt;td style = "display: none;"&gt;'+value.status+' &lt;/td&gt;';
       rows = rows + '&lt;td data-id="'+value.id+'"&gt;';
       rows = rows + '&lt;a href = my-posts-sub/'+value.id+'&gt;&lt;button class="btn 
       btn-secondary manage-sub-item"&gt;&lt;img src="/media/icon_manage.png" 
       width = "20"&gt;&amp;nbsp&amp;nbsp&lt;i&gt;Manage Sub&lt;/i&gt;&lt;/button&gt; &lt;/a&gt;';
       rows = rows + '&lt;button data-toggle="modal" data-target="#edit-item" 
       class="btn btn-secondary edit-item"&gt;&lt;img src="/media/icon_edit.png" 
       width = "20"&gt;&amp;nbsp&amp;nbsp&lt;i&gt;Edit&lt;/i&gt;&lt;/button&gt; ';
       rows = rows + '&lt;button class="btn btn-secondary remove-item"&gt;&lt;img 
       src="/media/icon_delete.png" width = "20"&gt;&lt;/button&gt;';
       //---------------------class------bootstrap--variable
       rows = rows + '&lt;/td&gt;';
       rows = rows + '&lt;/tr&gt;';
       });
  
       $("tbody").html(rows);
  
       }
        &lt;/script&gt;
  </code></pre>