Solved

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

Posted on 2011-03-01
14
769 Views
Last Modified: 2012-05-11
I would like to dynamically a class to each corner td in a table of an unknown number of columns and rows.

I need some thing like:

if table class ="rounded_corners"

if 1st td add class "td-top_left"
if last td in 1st row add class "td_top_right"
if 1st td in last row add class "td-bottom_left"
if last td in last row add class bottom_top_right"

Can you help?
0
Comment
Question by:Luv2Muff
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 4
  • +1
14 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35006834
0
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35006839
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

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35006852
$("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");
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:Swapnil Piparia
ID: 35006911
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
0
 

Author Comment

by:Luv2Muff
ID: 35007654
@Netswap

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

Can you make it work with multiple tables?

THANKS
0
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35007681
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

0
 

Author Comment

by:Luv2Muff
ID: 35007721
rather than target one particular table, I want it to target all tables on  a page with the same css class
0
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 250 total points
ID: 35007834
Try:
   $(".rounded_corners").each(function() {
       $("tr:first td:first", $(this)).addClass("td-top_left");
       $("tr:first td:last", $(this)).addClass("td_top_right");
       $("tr:last td:first", $(this)).addClass("td-bottom_left");
       $("tr:last td:last", $(this)).addClass("bottom_top_right");
   });

Open in new window

0
 
LVL 16

Assisted Solution

by:Swapnil Piparia
Swapnil Piparia earned 250 total points
ID: 35007870
Hi Luv2Muff,

replace first line
   $(".rounded_corners tr:first td:first").addClass("td-top_left");

Open in new window

with
 $(".rounded_corners tr:first-child td:first-child").addClass("td-top_left");

Open in new window


will solve your problem.

Thanks,
netswap
0
 

Author Comment

by:Luv2Muff
ID: 35008442
Thanks for you help!

@carl & @net happy to share 50/50?
0
 
LVL 16

Expert Comment

by:Swapnil Piparia
ID: 35009404
Hi Luv2Muff,

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

Thanks,
Netswap.
0
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35009445
Only because I copied the class names from the original post, when you've quite finished being pedantic.
0
 

Author Comment

by:Luv2Muff
ID: 35009684
Did not mean to upset any one, but it did work for me.

How about getting all the points on this one:

http://www.experts-exchange.com/Programming/Languages/Scripting/JScript/Q_26855564.html#a35008837
0
 
LVL 16

Expert Comment

by:Swapnil Piparia
ID: 35010002
@carl,

        I haven't replied to accepted post with intention of getting points. However when I was testing your solution it was not working that's why I have just pointed it out. If it is working for Luv2Muff then that's what all we want.

@Luv2Muff,

       Thanks but I am happy with whatever points you have given to us.

Thanks,
Netswap.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question