jQuery show/hide table rows based on cell content

Question

I'm trying to make some Javascript that shows/hides rows in a data table based on the content of the 4th cell.

Table is as follows:

DATE | DESCRIPTION | PRICE | PHONE |  STATUS  |
-----------------------------------------------
xxx  | yyyyyyyyyyy | 3243  | 32553 | Finished |
xxx  | yyyyyyyyyyy | 3243  | 32553 | Suspeded |
xxx  | yyyyyyyyyyy | 3243  | 32553 | Active   |
xxx  | yyyyyyyyyyy | 3243  | 32553 | Finished |

And I have the following code on the onChange function of a dropdown:

function refinesearch() {
    $(".data tr").hide(); //hide all rows
    var refine = $("#refine1").val(); //retrieve wanted status

    if(refine=="All") {
        $(".data tr").show(); //show all rows if want to see All
    } else {

        $(".data tr").each(function() { //loop over each row

             if($("td:eq(4)").text() == refine) { //check value of TD
                 $(this).show(); //show the row 

             }

        });

    }
}

Basically, the dropdown has the different statuses in, and if they selected, e.g Finished only the rows that have the status Finished should be shown and all others hidden.

But it doesn't seem to be working correctly. When I select All it works and when I select Finished it shows them all for some reason! Selecting any other value makes all rows hidden! :S - any ideas?

Answer 1

In your loop $("td:eq(4)") is selecting table cell in the whole page (not only the row in the loop).

You can still do this:

$(".data tr").toggle(function() {
  return refine == "All" || $("td:eq(4)", this).text() == refine;
})

instead of your whole if/else.

Answer 2

Answering my own question - thanks for the help Paul!

function refinesearch() {

    var count = 1;
    $(".data tr").hide(); //hide all rows
    $(".data tr:first").show();
    $(".data tr:nth-child(2)").show();

    var refine = $("#refine1").val(); //retrieve wanted status
    if(refine=="All") {
        $(".data tr").show(); //show all rows if want to see All
    } else {

        $(".data tr").each(function() { //loop over each row

            if($(this).find("td:eq(4)").text() == refine) { //check value of TD

                $(this).find("td").css({"background": "#fff", "border-right" : "none"});
                $(this).show(); //show the row 

            }

        });

        $(".data tr:visible").each(function() { //loop over each row

            if(isEven(count)) {
                $(this).find("td").css({"background" : "#D4EDF9", "border-right" : "3px solid #D4EDF9" });
            }

            count++;

        });
    }
}

Answer 3

 $(".newgrid tbody tr td:nth-child(5)").each(function () {

                    var found = false;
                    for (i = 0; i < selected.length && !found; i++) {
                        if ($(this).text().toLowerCase().indexOf(selected[i].toLowerCase()) >= 0) {
                            found = true;
                        }
                    }
                    if (!found)
                        $(this).parent().hide();
                    else
                        $(this).parent().show();

                });

This will do the trick. selected is an array contains what are the possible td values you going to check. If it's just a string, you can replace the array for loop.

Answer 4

In your loop over each row you miss $(this) to refer to your current element.
Then, use find() to filter the selection
$(this).find("td:eq(4)").text() == refine

Answer 5

Try using the find() method to restrict your criteria to the current row (yours is selecting all the rows in the table on each loop):

function refinesearch() {
    $(".data tr").hide(); //hide all rows
    var refine = $("#refine1").val(); //retrieve wanted status

    if(refine=="All") {
        $(".data tr").show(); //show all rows if want to see All
    } else {

        $(".data tr").each(function() { //loop over each row

             if($(this).find("td:eq(4)").text() == refine) { //check value of TD
                 $(this).show(); //show the row 

             }

        });

    }
}