Show Rows based on values in multiple columns. JQuery

Question

In JQuery hiding a table row based on a predefined columns td value is easy using the following code.

function filterRows(word){
$('.application>tbody>tr')
.show()
.find('td:nth-child(2)').not(':contains("'+word+'")')
.parent()
.hide()
}

However how would I go about showing rows that match td values in more than one column.

Something like the following (which does not work)

function filterRows(word){
$('.application>tbody>tr')
.show()
.find('td:nth-child(2)').not(':contains("'+word+'")')
.find('td:nth-child(3)').not(':contains(30)')
.parent()
.hide()
}

Basically I want to be able to show only rows where my word is passed in "word" is in the second column td and the third column contains "30".

Thanks for any heads up.

Nick Craver · Accepted Answer · 2010-11-17 16:05:41Z

5

You can use .end() to hop back in the chain, like this:

function filterRows(word){
  $('.application>tbody>tr').show()
    .find('td:nth-child(2)').not(':contains("'+word+'")').parent().hide()
    .end().end().end() //back 3 spots for parent, not and find
    .find('td:nth-child(3)').not(':contains(30)').parent().hide();
}

Though, in this case chaining is a bit verbose, just keep a reference in a variable, like this:

function filterRows(word){
  var rows = $('.application>tbody>tr').show();
  rows.find('td:nth-child(2):not(:contains("'+word+'"))').parent().hide();
  rows.find('td:nth-child(3):not(:contains(30))').parent().hide();
}

Or a bit more complex selector:

function filterRows(word){
  $('.application>tbody>tr').show()
    .find('td:nth-child(2):not(:contains("'+word+'")), td:nth-child(3):not(:contains(30))').parent().hide();
}

answered Nov 17, 2010 at 16:05

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

Lord Yorkshire Over a year ago

Thanks for the solution to my issue.I used the selector in the 3rd code block. Next stop is getting a book on JQuery and learning it in more depth to understand where selectors can be nested etc.

Lachezar · Accepted Answer · 2010-11-17 16:09:39Z

0

How about putting .parent() after the first find.

.find('td:nth-child(2)').not(':contains("'+word+'")').parent()

answered Nov 17, 2010 at 16:09

Lachezar

6,7633 gold badges36 silver badges34 bronze badges

2 Comments

Nick Craver Over a year ago

This would make the second find only look in the first find's results.

Lachezar Over a year ago

I think he is wanting to select rows which satisfies both conditions (conjunction), so hoping back in the previos set is not useful. Some experiments herE: jsfiddle.net/N25pM

John Hartsock · Accepted Answer · 2010-11-17 16:57:29Z

0

function filterrows(word) {
  var row = $(".application>tbody>tr");
  row.each(function () {
    $this = $(this);
    var secondColumn = $('td:nth-child(2):not(contains("'+word+'"))', $this)
    var thirdColumn= $('td:nth-child(2):not(:contains("30")', $this)
    if (secondColumn.length && thridcolumn.length) {  //if you find both a second and third column that matches
      $this.hide();
    } else { //if the second and third column dont match
      $this.show();
    }
  });
}

edited Nov 17, 2010 at 16:57

answered Nov 17, 2010 at 16:11

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

1 Comment

Nick Craver Over a year ago

This would fire up the selector engine 2n+1 times, n being the number of rows...plus create about 2n more jQuery objects...the performance would be very, very bad especially with larger tables. Also it's not correct, your if check would always be true since you're checking if(jQueryObject && jQueryObject).

user113716 · Accepted Answer · 2010-11-17 17:09:36Z

0

Here's a more efficient way to do it:

function filterRows(word){
    $('.application>tbody>tr').show()
        .filter(function() {
            return this.cells[ 1 ].innerHTML.indexOf( word ) < 0 ||
                   this.cells[ 2 ].innerHTML.indexOf( "30" ) < 0;
        }).hide()
}

If there are nested tags, a slightly different approach should be taken in the filter. In that case, you would replace this.cells[ 1 ].innerHTML with:

(this.cells[ 1 ].innerText || this.cells[ 1 ].textContent)

(Same for cells[ 2 ] of course.)

EDIT: I had && instead of ||. Sounds like the requirement is to .show() if both matches are found. Fixed. Now it will hide if either match is not found.

edited Nov 17, 2010 at 17:09

answered Nov 17, 2010 at 16:33

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

Show Rows based on values in multiple columns. JQuery

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related