Create Function To Search Entire Table And Not One Column Only

I have a table with a search function. Initially, my intention was to only search the contents of the first column. I would like to change this and create a search function that se

Solution 1:

Check if this is want you want,search by country/email/postal code : table-search.surge.sh

If you could give us a piece of your table so i can work my own function around it,anyway,this is what i found and its working(searches the entire table).Try to test this work in another file https://speedysense.com/filter-html-table-using-javascript/

Solution 2:

function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("userinfo");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
    // reading inner html from the td of tr
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
        // comparing the inner html 
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";       
            }
            else{
            tr[i].style.display = "none";
            
            }
        }
    }
}

<input id='myInput' onkeyup='searchTable()' type='text'>

<table id="userinfo">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

try the above working code