javascript – Altering w3 example table filter to support multiple text inputs

I am learning PHP, and I am still very far, far away from understanding javascript. I need help understanding how to filter an HTML table with a javascript. Here is a brief description of what I am doing.

I am getting a list of URLs and Titles into the array.

    $html_results[$html_int][0] = $link->getAttribute('href');
    $html_results[$html_int][1] = $link->nodeValue;

To print these results, I use a function to build the table.

 function build_table($html_results){
    echo '<table id="urlTable">';
    echo '<tr class="header">';
    echo '<th style="width:70%;">URL</th>';
    echo '<th style="width:40%;">TITLE</th>';
    echo '</tr>';

    for($i=0;$i<count($html_results);$i++) {
      echo('<tr>');
      echo('<td>' . $html_results[$i][0] . '</td>');
      echo('<td>' . $html_results[$i][1] . '</td>');
      echo('</tr>');
    }
    "</table>";

This works very well, but now I need to filter these results without reloading the page. I created two text fields, like in the example below:

input type="text" id="URLFilter" onkeyup="myFunction()" placeholder="Filter URLs.."
input type="text" id="TitleFilter" onkeyup="myFunction()" placeholder="Filter Titles.."

I tried using this function from w3schools:

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("URLFilter");
  filter = input.value.toUpperCase();
  table = document.getElementById("urlTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

And this script works well. I can filter the table, but it works only for the first column in the table, and for the URLFilter input. What I need help understanding is how can I modify this function to:

Filter the first column in the table with URLFilter input. The script should DISPLAY rows that contain URLFilter
Filter the second column in the table with TitleFilter input. The script should HIDE rows that contain TitleFilter
Use both filters at the same time without reloading the table

I don’t mind if I need to call two separate scripts to make it work. I tried making two scripts, but the table always resets and does not combine two filters. I also need a way to store results from a filtered table into another PHP array, that I would like to save into the database. Please apologize for the long post, and thanks in advance!

Answer

To combine the filter you need to apply both filters if you change the value of URLFilter or TitleFilter so you will only need 1 function. The code below compares both input values and if 1 of them doesn’t match the row is hidden.

function myFunction() {
  var url = document.getElementById("URLFilter").value,
      title = document.getElementById("TitleFilter").value,
      table = document.getElementById("urlTable"),
      matchURL = true,
      matchTitle = true;

  for(var i = 0; i < table.rows.length; i++) { // loop over table rows
    table.rows[i].style.display = ''; // show row

    matchURL = (url == '' || table.rows[i].cells[0].innerText.toUpperCase().indexOf(url) > -1);
    matchTitle = (title == '' || table.rows[i].cells[1].innerText.toUpperCase().indexOf(title) > -1);

    if(!matchURL || !matchTitle) {
      table.rows[i].style.display = 'none'; // hide row
    }
  }
}

Advertisement

Answer