Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
13 days ago

The first row is being cut by the script I'm using to search multiple tables, which is pretty unattractive.

The following code employs a function called "tablefilter" that hides table rows that don't match a search query. Unfortunately, it currently cuts off the first row, creating an undesirable effect. I have tried searching the web for a solution but to no avail, hence my question here. Could you please assist me with this problem? Your help is greatly appreciated. You can test this code for yourself on this example site: example
Answers(2)
avatar
Vogi
11 days ago
Verified Answer
I'm sorry to hear that you're having trouble with the tablefilter function. I found a Stack Overflow post that might be helpful. It suggests filtering specific columns by adding children [column number] to JQuery filter. Normally, JQuery looks for the keyword from all the columns in every row. If you wanted to filter only ColumnB on a table, you would need to add children [1] to filter as in the script below: 
$('table tr').filter(function() {
    return $('td:eq(1)', this).text() == 'ColumnB';
}).hide();
I hope this helps! Let me know if you have any other questions.

Sources

jQuery Table Row Filtering by Column - Stack OverflowHome | TableFilterTableFilter | tablefilter
avatar
Tolerim
13 days ago
The issue with the code is that it skips the first row of the table because the loop starts from i=0. One way to solve this is to change the loop iteration to start from i=1. Here's the updated code: 
function tablefilter() {
    // Declare variables
    var input, filter, tables, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    tables = document.querySelectorAll(".table");
    tables.forEach(function(table) {
        tr = table.getElementsByTagName("tr");
        // Loop through all table rows, and hide those who don't match the search query
        for (i = 1; i < tr.length; i++) {
            if (!tr[i].classList.contains('header')) {
                td = tr[i].getElementsByTagName("td"),
                    match = false;
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        match = true;
                        break;
                    }
                }
                if (!match) {
                    tr[i].style.display = "none";
                } else {
                    tr[i].style.display = "";
                }
            }
        }
    });
}
By changing the starting index of the loop from i=0 to i=1, the first row will no longer be skipped.
;