Kevin Kevin - 3 years ago 140
HTML Question

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

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

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

$cells.each(function (i2, e2) {
var cell = $(this).text();
$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?

Answer Source

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");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download