Website Building Coding: Search / Filter Table with Javascript

html

search bar and table with id and function assigned

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search by key words.." title="search bar">  <table id="myTable">   <tr>     <th>...</th>   </tr>   <tr>     <td>...</td>   </tr>  ... </table>

Level 1: Search in cells in a specific column, 

<script> function myFunction() {   // Declare variables   var input, filter, table, tr, td, i, txtValue;   input = document.getElementById("myInput");   filter = input.value.toUpperCase();   table = document.getElementById("myTable");   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")[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>

Level 2: Search in all columns, cell by cell in each row

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

Level 3: Search multiple key words ignoring the order of keywords in all columns, cell by cell in each row

<script>  function filterMatch(itemStr, keyword){     var words = keyword.split(' '), i = 0, w, reg;     for(; w = words[i++] ;){         reg = new RegExp(w, 'ig');         if (reg.test(itemStr) === false) return false;   // word not found         itemStr = itemStr.replace(reg, '');   // remove matched word from original string     }     return true; } function myFunction() {   var input, filter, table, tr, tds, td, i, j, txtValue;   input = document.getElementById("myInput");   filter = input.value.toUpperCase();   table = document.getElementById("myTable");   tr = table.getElementsByTagName("tr");   for (i = 0; i < tr.length; i++) {     tds=tr[i].getElementsByTagName("td")     for (j=0;j<tds.length;j++){     td = tds[j];     if (td) {       txtValue = td.textContent || td.innerText;       if (filterMatch(txtValue.toUpperCase(),filter)) {         tr[i].style.display = "";         break;       } else {         tr[i].style.display = "none";       }     }     }   } } </script>

Level 4: Search multiple key words ignoring the order of keywords in all columns, row by row (search in the combined content of all the cells in the same row)

<script>  function filterMatch(itemStr, keyword){     var words = keyword.split(' '), i = 0, w, reg;     for(; w = words[i++] ;){         reg = new RegExp(w, 'ig');         if (reg.test(itemStr) === false) return false;         itemStr = itemStr.replace(reg, '');     }     return true; }   function combineCellsContents(allElements){      var comStr=""      for (var i=0; i<allElements.length; i++){        comStr=comStr + " "+allElements[i].innerText      }      return comStr }   function myFunction() {   var input, filter, table, tr, td, i, txtValue;   input = document.getElementById("myInput");   filter = input.value.toUpperCase();   table = document.getElementById("myTable");   tr = table.getElementsByTagName("tr");   for (i = 0; i < tr.length; i++) {     td = combineCellsContents(tr[i].getElementsByTagName("td"));     if (td) {       txtValue = td.toUpperCase();       if (filterMatch(txtValue,filter)) {         tr[i].style.display = "";       } else {         tr[i].style.display = "none";       }     }         } </script>