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
Solved

jQuery remove class from 2nd column of table

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

840 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