CODEWITHSUNDEEP
jqueryhtml-tablejquery-selectors
Dave Clarke
Dave Clarke

Reputation: 2696

jQuery show/hide table rows based on cell content

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?

Upvotes: 0

Views: 12952

Answers (5)

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10562

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

Upvotes: 1

Dave Clarke
Dave Clarke

Reputation: 2696

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

        });
    }
}

Upvotes: 0

Paul Grimshaw
Paul Grimshaw

Reputation: 21034

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 

             }

        });

    }
}

Upvotes: 1

Marco Risi
Marco Risi

Reputation: 108

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

Upvotes: 0

Guillaume Poussel
Guillaume Poussel

Reputation: 9822

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.

Upvotes: 4

Related Questions