如何选择第一个和第二个td包含特定值的tr？

Question

I have table that looks like this:

Code as follows:

<table id="table1">
    <tr>
        <td>HU</td>
        <td>BIP</td>
        <td>Pannon</td>
    </tr>
    <tr>
        <td>HU</td>
        <td>BIP</td>
        <td>T-Mobile</td>
    </tr>
    <tr>
        <td>HU</td>
        <td>BIP</td>
        <td>Vodafone</td>
    </tr>
    <tr>
        <td>HU</td>
        <td>FUN</td>
        <td>Pannon</td>
    </tr>
    <tr>
        <td>HU</td>
        <td>FUN</td>
        <td>T-Mobile</td>
    </tr>
    <tr>
        <td>HU</td>
        <td>FUN</td>
        <td>Vodafone</td>
    </tr>
</table>

How to select last <tr> whose first <td> contains "HU" and second <td> contains "BIP".

I tried to select it like this:

$('#table1').find('tr td:first-child:contains("HU") td:nth-child(2):contains("BIP")').last();

Shows nothing

And like this:

$('#table1').find('tr td:first-child:contains("HU")').parent().each(function(i,e){
    console.log($(e).children('td:contains("BIP")').parent().last());
});

Doesn't show last tr but all of them(that contains "HU" and "BIP") instead.

Any idea?

Answer 1

You can do this using eq() and includes() methods.

eq() reduces the set of matched elements to the one at the specified index.

 var copy; $('table tr').each(function(i,e){ var first=$(this).find('td').eq(0).html().includes("HU"); var second=$(this).find('td').eq(1).html().includes("PIB"); if(first && second){ copy=$(e); } }); console.log($(copy).html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>HU</td> <td>PIB</td> <td>Pannon</td> </tr> <tr> <td>HU</td> <td>PIB</td> <td>T-Mobile</td> </tr> <tr> <td>HU</td> <td>PIB</td> <td>Vodafone</td> </tr> <tr> <td>HU</td> <td>FUN</td> <td>Pannon</td> </tr> <tr> <td>HU</td> <td>FUN</td> <td>T-Mobile</td> </tr> <tr> <td>HU</td> <td>FUN</td> <td>Vodafone</td> </tr> </table> 

Answer 2

You can do something like this:

 $(document).ready(function() { var target = $('table tr td:first-child:contains("HU")').parent().find('td:nth-child(2):contains("BIP")').last().parent(); console.log(target.html()); }); 

 <script src="https:code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <table> <tr> <td>HU</td> <td>BIP</td> <td>Pannon</td> </tr> <tr> <td>HU</td> <td>BIP</td> <td>T-Mobile</td> </tr> <tr> <td>HU</td> <td>BIP</td> <td>Vodafone</td> </tr> <tr> <td>HU</td> <td>FUN</td> <td>Pannon</td> </tr> <tr> <td>HU</td> <td>FUN</td> <td>T-Mobile</td> </tr> <tr> <td>HU</td> <td>FUN</td> <td>Vodafone</td> </tr> </table> 

It first selects all first td containing "HU" then selects their parent tr and then again filters the result by finding the second td containing "BIP" and then finally selects the last matched element.