jQuery - How to add a class to each td of a table

Try something like:

<script type="text/javascript">
   $("tr:first td:first").addClass("td-top_left");
   $("tr:first td:last").addClass("td_top_right");
   $("tr:last td:first").addClass("td-bottom_left");
   $("tr:last td:last").addClass("bottom_top_right");
</script>

Open in new window

Gurvinder Pal Singh

$("td:first-child").addClass("td-top_left");
$("tr:first-child td:last-child").addClass("td_top_right");
$("tr:first-child td:first-child").addClass("td_bottom_left");
$("tr:last-child td:last-child").addClass("td_bottom_right");

Hi Luv2Muff,

Here is your solution

$(".rounded_corners tr:first td:first").addClass("td-top_left");
 $(".rounded_corners tr:first-child  td:last-child").addClass("td_top_right");
 $(".rounded_corners tr:last-child  td:first-child").addClass("td_bottom_left");
 $(".rounded_corners tr:last-child  td:last-child").addClass("td_bottom_right");

Open in new window

Here is link to working code snippet.
http://jsfiddle.net/vmnDQ/

Thanks,
netswap

ASKER

@Netswap

That code snippet works, but break if you have multiple tables on a page.

Can you make it work with multiple tables?

THANKS

If you want to target a specific table you need to add its ID to the selector. Something like:

<script type="text/javascript">
   $("#yourTableID tr:first td:first").addClass("td-top_left");
   $("#yourTableID tr:first td:last").addClass("td_top_right");
   $("#yourTableID tr:last td:first").addClass("td-bottom_left");
   $("#yourTableID tr:last td:last").addClass("bottom_top_right");
</script>

Open in new window

ASKER

rather than target one particular table, I want it to target all tables on a page with the same css class

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Thanks for you help!

@carl & @net happy to share 50/50?

Hi Luv2Muff,

Solution provided by carl (accepted one) is not working . Please check http://jsfiddle.net/vmnDQ/2/.

Thanks,
Netswap.

Only because I copied the class names from the original post, when you've quite finished being pedantic.

ASKER

Did not mean to upset any one, but it did work for me.

How about getting all the points on this one:

https://www.experts-exchange.com/questions/26855564/jQuery-Add-a-different-class-if-only-one-td-in-a-row.html?anchorAnswerId=35008837#a35008837