Question

I have a table as under

<table >
        <tr>
            <th scope="col">EmpId</th><th scope="col">EmpName</th>
        </tr>
        <tr>
            <td>1</td><td>ABC</td>
        </tr>
        <tr>
            <td>2</td><td>DEF</td>
        </tr>
</table>

I want to set the background color of only the “td” elements of the table and not “th”. I have tried with

$("table").children("td").css('background-color', '#00ff00');

OR



$("table").children("tr").children("td").css('background-color', '#00ff00');

But with no result.

Please help as what mistake I am doing?

Thanks

Answer 1

You can try like following:

$("table tr").find("td").css('background-color', '#00ff00');

or

$("table td").css('background-color', '#00ff00');

DEMO

According to @Matt Huggins’s comment, you can do like following also:(but not necessary)

$("table tbody td").css('background-color', '#00ff00');

DEMO