Question

Say I have a table:

<table id="#myTable">
    <tr>
        Section 1
        <td>
            <table>
                <tr>
                    Sub 1
                    <td>Sub2</td>
                    Sub3
                    <td>Sub 4</td>
                </tr>
            </table>
        </td>

        <td>Section 2</td>
    </tr>
</table>

How do I make a jQuery selector for a function that finds the td containing Sub4 and changes its color to red without affecting the background color of all the other ones?

I tried:

$("#myTable td:contains('Sub 4')").css('background','red');

But it appears to think that the outer table also catches the event. How do I get a reference to just the innermost td?

Answer 1

You have assigned an id in wrong way

<table id="#myTable">

should be

<table id="myTable">

If this is your table

<table id="myTable" class="cls" border='1'>
    <tr>
        <td>Section 1</td>
        <td>Sub 1</td>
    </tr>
    <tr>
        <td>Sub2</td>
        <td>Sub3</td>
    </tr>
    <tr>
        <td>Sub 4</td>
    </tr>
    <tr>
        <td>Section 2</td>
    </tr>
</table>​

then you can use

$("#myTable tr td:contains('Sub 4')").css('background','red');

to apply red background color to only td containning “Sub 4”.

A fiddle is here.