Filter only a specific column in jquery filter

Question

i am modifying a jquery filter for a web page of a friend, he is using this filter from w3schools example ( https://www.w3schools.com/Bootstrap/bootstrap_filters.asp ), but in this case jquery is looping all columns, and i only need to filter a specific column of the table. How can i "ignore" the others columns and filter the rows through a specific column?

Here is a jsfiddle example ( https://jsfiddle.net/lucas2500/w7atphe3/ ), i would like to filter all rows by the first column (Firstname).

$(document).ready(function(){
    $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

Sorry for any grammar mistakes.

Answer 1

When you apply the filter, it's currently checking the .text() of the entire row:

$(this).text().toLowerCase().indexOf(value) > -1

where this is each tr .

You can replace this part to check the specific columns, eg just the first column:

$(this).find("td:eq(0)").text().toLowerCase().indexOf(value) > -1

Giving:

$("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
        $(this).toggle($(this).find("td:eq(0)").text().toLowerCase().indexOf(value) > -1)
    });
});

there are other ways to do this, but this is close to your original logic/code.

Updated fiddle: https://jsfiddle.net/8owLdc2t/