Solved

jQuery remove class from 2nd column of table

Posted on 2012-04-10
4
488 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
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…

808 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