jQuery: How to get the first “td” in all rows

Question

I have a table, and I want get the first “td” in all rows.

My jquery here:

$("table.SimpleTable tr td:first-child").css('background-color','red');

and my HTML here:

<table class='SimpleTable' border="1" ID="Table1">
        <tr>
            <td>Left</td>
            <td>Right</td>
        </tr>
        <tr>
            <td>Left</td>
            <td>Right</td>
        </tr>
        <tr>
            <td>Left</td>
            <td>Right</td>
        </tr>
        <tr>
            <td>Left</td>
            <td>
                <table border="1" ID="Table2">
                    <tr>
                        <td>AAA</td>
                        <td>AAA</td>
                        <td>AAA</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Left</td>
            <td>
                <table border="1" ID="Table3">
                    <tr>
                        <td>BBB</td>
                        <td>BBB</td>
                        <td>BBB</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

The problem here it get the first "td" in the nested table of the second "td".

Please help me!

Answer 1

Normal CSS selectors will work, you were almost spot on. First td in a nested table would be

$('table table tr td:first-child');

To limit the selection only to the second table would be:

$('table table tr td:first-child').filter(':nth(1)');

Live example at jsfiddle

Answer 2

try:

$("table.SimpleTable > tbody > tr > td:first-child").css(..);

> only searches in children instead of all descendants. we need tbody as browsers insert that into the table.

example here.

Answer 3

$('table.SimpleTable').find('tr').each(function(){
   $(this).find('td:first').css('backgroundColor', 'red');
});

should do it.

Kind Regards

--Andy

Answer 4

You need to select immediate/direct children, try this:

$("table.SimpleTable > tr td:first-child").css('background-color','red');

The > allows you to target only the immediate elements