Show Rows based on values in multiple columns. JQuery

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 head开发者_运维技巧s up.

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();
}

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

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

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();
    }
  });
}

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.