CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-selectors
KJSR
KJSR

Reputation: 1757

Jquery search not hiding first row in a table

I am having difficulty in understanding as to why my search of a table column is always showing the first row and the matched row after that? Even though the keyword doesn't match the cell in row 1 it will always show on top? I have gone through my code several times and tried different approach it still wont hide the first row?

Here is my working code

$('#filterbyname').on("keyup", function () {
        var val = $(this).val();
        var matches = $("table.bill tr:not(:first-of-type)");

        matches.each(function (i,e) {            
            debugger;
            $row = $(this);                
            $cells = $row.find("td:nth-child(2)");

            $cells.each(function (i2, e2) {
                var cell = $(this).text();
                debugger;
                $row.toggle(cell.indexOf(val) >= 0);             
            });
        });
 });

You can see from the above code if cell.indexOf(val) >= 0) then it will toggle according the matching rows.

Any suggestions please?

Upvotes: 1

Views: 136

Answers (1)

cнŝdk
cнŝdk

Reputation: 32145

In fact in your matches variables you are using tr:not(:first-of-type) which selects all the rows expect the first one, because :not selector excludes all elements that matches :first-of-type here, which means that they are not the first child in their parent, so the first tr will be ignored.

Change this code:

var matches = $("table.bill tr:not(:first-of-type)");

To the following:

var matches = $("table.bill tr");

Upvotes: 3

Related Questions