Skip to content Skip to sidebar Skip to footer

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:

functionsearchTable() {
    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";
            
            }
        }
    }
}
<inputid='myInput'onkeyup='searchTable()'type='text'><tableid="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

Post a Comment for "Create Function To Search Entire Table And Not One Column Only"