This is my table , use tr, and td.

NAME Address CITY STATE 
ABC   123    A     CA 
AB8   123    B     CA
AFC   456    B     TX 
POI   985    C     KJ

After document ready, it will hide all already.

Now I want a line to show all tr have: -> Column (4) = CA "and" Column (3) = B

I tired my code:

$("table[id=maintablex] tr td:nth-child(4):contains('CA'), table[id=maintablex] tr td:nth-child(3):contains('B')").closest('tr').show();

But it show everything have (4) = CA , and (3) = B... My code was "OR" , can some one help me this one ?

Added FULL HTML CODE:

<table id="table">
    <tr>
        <td>ABC</td>
        <td>123</td>
        <td>A</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>1234</td>
        <td>B</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>AUF</td>
        <td>123</td>
        <td>C</td>
        <td>TX</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>456</td>
        <td>B</td>
        <td>TX</td>
    </tr>
</table>
<script language="Javascript">
$("table[id=table] tr").hide();

// Code show here


</script>

The result I want to show is only :

AB8   123    B     CA

This is my table , use tr, and td.

NAME Address CITY STATE 
ABC   123    A     CA 
AB8   123    B     CA
AFC   456    B     TX 
POI   985    C     KJ

After document ready, it will hide all already.

Now I want a line to show all tr have: -> Column (4) = CA "and" Column (3) = B

I tired my code:

$("table[id=maintablex] tr td:nth-child(4):contains('CA'), table[id=maintablex] tr td:nth-child(3):contains('B')").closest('tr').show();

But it show everything have (4) = CA , and (3) = B... My code was "OR" , can some one help me this one ?

Added FULL HTML CODE:

<table id="table">
    <tr>
        <td>ABC</td>
        <td>123</td>
        <td>A</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>1234</td>
        <td>B</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>AUF</td>
        <td>123</td>
        <td>C</td>
        <td>TX</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>456</td>
        <td>B</td>
        <td>TX</td>
    </tr>
</table>
<script language="Javascript">
$("table[id=table] tr").hide();

// Code show here


</script>

The result I want to show is only :

AB8   123    B     CA

• javascript
• jquery
• jquery-selectors
• selection

• 1 I would remend replacing table[id=maintablex] with #maintablex, it will perform much faster. Here is a jsperf to prove: jsperf./jquery-id-vs-id-attribute – Jasper Commented Nov 30, 2011 at 23:43
• yes, add #table , it run faster. – user1074438 Commented Nov 30, 2011 at 23:54

4 Answers 4

Why not do it this way:

$("table[id=maintablex] tr td:nth-child(3):contains('B')", 
    $("table[id=maintablex] tr td:nth-child(4):contains('CA')")
).closest('tr').show();

I don't know if this is faster, but based on @Jasper 's response, why not do this:

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#table')
    .find('td:nth-child(4):contains("CA")')
    .closest('tr')
    .find('td:nth-child(3):contains("B")')
    .closest('tr')
    .addClass('active');

Here's the jsfiddle: http://jsfiddle/KQMXe/

Your very first selector is always going to match rows where State = CA AND where State = B. I would break this into two pieces. Haven't tested this code but it should get you close...

var stateRows = ("#maintablex tr td:nth-child(4):contains('CA')").parent();
var matchRows = stateRows.find("td:nth-child(3):contains('B')").parent();

matchRows.doWhateverYouLikeWithTheResults();

JS--

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#maintablex').find('td:nth-child(4):contains("CA")').each(function (index, value) {

    //un-hide the parent `<tr>` element of this `<td>` by adding the `active` class to the `<tr>`
    $(this).parents('tr:first').addClass('active');
});

CSS--

/*Hide all the table rows by default*/
tr {
    display : none;
}

/*declare a class that shows the table rows when added to them*/
tr.active {
    display : table-row;
}

UPDATE

I updated the above code to only look for the third column in each row (I had omitted that part of the answer before).

Here's a jsfiddle: http://jsfiddle/jasper/Mp7Jq/3/

Try this

$.each($('table#table tr td:nth-child(4):contains("CA")').parent(),function(){
    if(($.inArray(this, $('table#table tr td:nth-child(3):contains("B")').parent())) > -1){
        $(this).show();
    }
});

Hope this helps. :)