yanivk1984
6/30/2019 - 10:34 AM

javascript, html --> filter multiple columns in table

    <thead class="thead-dark" >
        <tr>
            <th scope="col"> Domain Name <input id="0" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
            <th scope="col"> Device Name <input id="1" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
            <th scope="col"> Main IP Address/VIP <input id="2" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
            <th scope="col"> Cluster Member Name <input id="3" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
            <th scope="col"> Cluster Member IP Address <input id="4" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
         </tr>
    </thead>
function myFunction(id) {
  // Declare variables
  let input, filter, table, tr, td, i, txtValue;
    input = document.getElementById(id);
    console.log(input.value);
    filter = input.value.toUpperCase();
  table = document.getElementById("table");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[id];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}