Solved

jQuery remove class from 2nd column of table

Posted on 2012-04-10
4
483 Views
Last Modified: 2012-04-11
I'm trying to remove a class from the 2nd column only of each row in a tbody (without success).

I've tried:

$('#tsTable tbody tr td').next().removeClass('rmb');
which removes it from all columns (not what I want)

and also:

$('#tsTable tbody tr td:eq(1)').removeClass('rmb');
and:

$('#tsTable tbody tr > td:eq(1)').removeClass('rmb');
both of which seem to do nothing.

Any help would be appreciated.
0
Comment
Question by:ShanghaiD
  • 2
  • 2
4 Comments
 
LVL 6

Expert Comment

by:kswathi
ID: 37827177
can you give some dummy class to the second td and remove the class with that class. or give some id & remove with that id. Is the table generated dynamically? can you give the table structure?
0
 

Author Comment

by:ShanghaiD
ID: 37830663
The table columns are generated after a getJSON call, as follows:

$.getJSON(.......}, function(json) {
 var strHTML=''; // set empty string
 var sum = []; // initialise totals variables
 $.each([1,2,3,4,5,6,7], function(n,v){
  sum[v] = 0;//set sums as zero
 });
 $.each(json.DATA, function(i,col) {
  $.each([1,2,3,4,5,6,7], function(n,v){
   sum[v] += parseFloat(col[v]);//update sums
  });
 strHTML += '<tr">'; //open new row
 strHTML += '<td abbr="' + col[0] + '">' + col[0] + '</td>'; //add debtor column
 $.each([1,2,3,4,5,6,8], function(n,v){
  strHTML += '<td class="rmb" abbr="' + col[v] + '">' + addCommasOrBlank(parseFloat(col[v]).toFixed()) + '</td>'; //add numerical columns
 });
 strHTML += '</tr>'; //close row
});
$('#tsTable tbody').append(strHTML);//append table tbody rows

Open in new window


I will use your suggestion of inserting a dummy class to locate the column if there is no "better" solution (and award you points for the answer) -- but I was really trying to find out if their was a direct way of accessing only column 2 in each row.
I have successfully used last-child in
$('#tsTable tbody tr td:last-child').addClass('daysold');

Open in new window

and I was hoping there was a way of similarly accessing (only) column 2 (or 3 or whatever) -- not just first-child or last-child.  The documentation seemed to indicate that this was possible using :eq(1) syntax, but I have not been successful with that.
0
 
LVL 6

Accepted Solution

by:
kswathi earned 500 total points
ID: 37831840
Actually you approach is right but you must check actually how the html is rendering. As per your code [$('#tsTable tbody tr td:eq(1)').removeClass('rmb');]
 the table   "tsTable" has "tbody" and then "tr" ,then "td" as you are appending the code to the table check if it is correctly appending  while rendering.

Hope it helps.
0
 

Author Closing Comment

by:ShanghaiD
ID: 37835842
Thanks! I am giving you the points because you have lead me to the solution I was seeking.  Your code removes the class only from the second column of the first row of the tbody.  I want to remove it from every second column of every row of the tbody.  Your suggestion has lead me to that solution, which is to use :nth-child() instead of :eq():

$('#tsTable tbody tr td:nth-child(2)').removeClass('rmb');

works perfectly!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now