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?

Guillaume Poussel · Accepted Answer · 2012-09-12 09:52:39Z

4

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.

answered Sep 12, 2012 at 9:52

Guillaume Poussel

9,8522 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Grimshaw · Accepted Answer · 2012-09-12 09:58:19Z

1

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 

             }

        });

    }
}

edited Sep 12, 2012 at 9:58

answered Sep 12, 2012 at 9:45

Paul Grimshaw

21.2k6 gold badges43 silver badges60 bronze badges

3 Comments

Dave Clarke Over a year ago

This did it! However it does hide the header row too - any simple way to avoid this? I addition, I have CSS that colours every other row background. Hiding rows obviously screws this, is there any way to 'regenerate' this fill? Cheers.

Paul Grimshaw Over a year ago

You could add an index and increment it each loop. Then always show the row if 'i==1' (header row). For the row colors, use an the 'nth child' selector in a style sheet davidwalsh.name/css-tables-css3-alternate-row-colors

Dave Clarke Over a year ago

Okay - I've got the header working and think I'm near with the CSS but can't figure out the right selector. I have pastebin.com/HkiEeMTC but it doesn't work!

Nalan Madheswaran · Accepted Answer · 2014-10-18 21:34:04Z

1

 $(".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.

answered Oct 18, 2014 at 21:34

Nalan Madheswaran

10.6k1 gold badge60 silver badges44 bronze badges

Comments

Marco Risi · Accepted Answer · 2012-09-12 09:52:52Z

0

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

answered Sep 12, 2012 at 9:52

Marco Risi

1081 silver badge7 bronze badges

Comments

Dave Clarke · Accepted Answer · 2012-09-12 10:33:04Z

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++;

        });
    }
}

Collectives™ on Stack Overflow

jQuery show/hide table rows based on cell content

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related