CODEWITHSUNDEEP
asp.netjquery
Famous Nerd
Famous Nerd

Reputation: 416

jQuery hide all table rows which contain a hidden field matching a value

Though I don't doubt this has been answered I cannot find a great match for my question.

I have a table for which I'd like to filter rows based on whether or not they contain a hidden field matching a value.

I understand that the technique tends to be "show all rows", "filter the set", "show/hide that filtered set"

I have the following jquery but I'm aweful with filter and my filtered set seems to always contain no elements.

my table is the usual

<table>
<tr><td>header></td><td>&nbsp;</tr>
<tr>
<td>a visible cell</td><td><input type='hidden' id='big-asp.net-id' value='what-im-filtering-on' />
</td>
</tr>
</table>

My goal is to be able to match on tr who's descendent contains a hidden input containing either true or false.

this is how I've tried the selector (variations of this) and I'm not even testing for the value yet.

function OnFilterChanged(e){
    //debugger;
    var checkedVal = $("#filters input[type='radio']:checked").val();
    var allRows = $("#match-grid-container .tabular-data tr");
    if(checkedVal=="all"){        
         allRows.show();
    }
    else if(checkedVal=="matched"){
         allRows.show();
         allRows.filter(function(){$(this).find("input[type='hidden'][id~='IsAutoMatchHiddenField']")}).hide();

    }
    else if(checkedVal=="unmatched"){

    }
}

Am I way off with the filter? is the $(this) required in the filter so that i can do the descendant searching?

Thanks kindly

Building upon those great suggestions below I have found that the following does the trick. I'd missed the fact that the filter closure function must return true/false based on the filter condition. Also, that the ends-with selector is great for asp.net generated ids based on INamingContainer

allRows.show();
allRows.filter(function(){
            return $(this).find(
               "input[type='hidden'][id$='IsAutoMatchHiddenField']").val() == "False";
         }).hide();

Upvotes: 3

Views: 3897

Answers (3)

guzart
guzart

Reputation: 3730

Couple of suggestions.

  1. The find function needs to return a boolean.
  2. Are you looking for an id? or looking for the value? [id~='IsAutoMatchHiddenField']
  3. The [attribute~=value], will look for a word in the value separated by whitespace, example: [value~='foo'] will not match value="foo-bar" but will match value="foo bar".

.

// Chain your functions, the beauty of jQuery.
allRows.show()
   .filter(function(index){
      // function needs to return a boolean.
      return $(this)
         .find("input[type='hidden'][id~='IsAutoMatchHiddenField']")
         .val() == 'valuetocheck';
   });

Upvotes: 2

David Hellsing
David Hellsing

Reputation: 108500

I think you need to return a boolean or equivalent from the filter function. How about:

allrows.filter(function() {
    return $(this).find(':hidden').length;
}).hide();

Or:

$('tr :hidden').closest('tr').hide();

Upvotes: 1

Jeff Rupert
Jeff Rupert

Reputation: 4840

$('#mySelector :hidden').filter(
    function (index)
    {
        return $(this).find('.repeatedObject').val() == 'someValue';
    }
).hide();

The filter() function needs a boolean to be returned to actually determine whether or not to leave an element in the list. Check the API (http://api.jquery.com/filter/) for more information.

Also, as a sidenote, the val(), html(), text(), and other related functions return the information from the first element in the set. If you want to loop through, you'd have to use each or a for loop.

Upvotes: 3

Related Questions