使用Javascript搜索表格

Question

This is my very first post onto Stackoverflow. Happy to be here! I'm into my 8th week of internship at a company where I'm working on HTML, CSS, Jquery, Ajax, SQL.

Back when I started I was a newbie, but I'm getting the hang of it slowly.

I've run into something I don't know how to solve.

My page displays the tables from a SQL database. It also has a header with the categories.

I've made the searchbar so that I can enter the ID, and it will then display the result live. What I actually want is to be able to search for everything. So Id, client, certname,supplier_id, partner_nr etc.

Does anyone know what I need to do?

Here is my code related to this portion:

**HTML:

<form class="form-inline my-2 my-lg-0" id="searchTable">
                <input class="form-control mr-sm-2" type="search" name="searchInput" placeholder="Search" aria-label="Search">
            </form>

Main.js

$("input[name=searchInput]").on('change keypress paste focus textInput input',function(){
        // Declare variables
        var input, filter, table, tr, td, i, x;
        input = $(this).val();
        filter = input.toUpperCase();
        table = document.getElementById("cfgAccounts");
        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");
            for (x = 0; x < td.length; x++) {
                td = tr[i].getElementsByTagName("td")[x];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    });

Answer 1

If you want to search the whole row then just change the for loop in your code to:

// 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];
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }

        }

No need to iterate through each td cell.