jQuery change class name

Question

I want to change the class of a td tag given the td tag's id:

<td id="td_id" class="change_me"> ...

I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?

score 780 · Accepted Answer · edited Apr 08 '21 at 18:35

780

Using jQuery You can set the class (regardless of what it was) by using .attr(), like this:

$("#td_id").attr('class', 'newClass');

If you want to add a class, use .addclass() instead, like this:

$("#td_id").addClass('newClass');

Or a short way to swap classes using .toggleClass():

$("#td_id").toggleClass('change_me newClass');

Here's the full list of jQuery methods specifically for the class attribute.

edited Apr 08 '21 at 18:35

Rashed Rahat

2,357
2
18
38

answered Aug 10 '10 at 19:44

Nick Craver

623,446
136
1,297
1,155

Hey @Nick, add an event handler that finds the first td parent [`var $td = $(this).parents('td:first')`] then gets it's id [`var id = $td.attr('id');`] and also the class [`var class = $td.attr('class');`] because he wants a click element inside the TD to trigger it – Bob Fincheimer Aug 10 '10 at 19:56
@Bob - I don't follow, where are you getting that from, another question? This one says he has the ID of the element :) Also to get a parent you can use `.closest('td')` instead of `.parents('td:first')` :) – Nick Craver Aug 10 '10 at 19:58
1

his last sentence: `I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?` - maybe i am reading it wrong, maybe he means use the td's id to change the class... – Bob Fincheimer Aug 10 '10 at 19:59
1

@Bob - Right...some *other* DOM object, you're *assuming* that object is inside the `` in question :) – Nick Craver Aug 10 '10 at 20:01
Note that the `change_me` part is optional if you use `toggleClass()` – sakisk Dec 16 '16 at 14:11

score 103 · Answer 2 · answered Aug 10 '10 at 19:45

103

I think you're looking for this:

$('#td_id').removeClass('change_me').addClass('new_class');

answered Aug 10 '10 at 19:45

Fosco

38,138
7
87
101

score 33 · Answer 3 · edited Feb 01 '13 at 18:56

33

I think he wants to replace a class name.

Something like this would work:

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

from http://monstertut.com/2012/06/use-jquery-to-change-css-class/

edited Feb 01 '13 at 18:56

Nighto

3,994
3
23
28

answered Jun 11 '12 at 15:52

jack

341
3
2

But he wanted to do it inside the click event of some other dom object – keyser Oct 20 '12 at 09:20

score 9 · Answer 4 · edited Mar 27 '15 at 10:50

9

You can do This : $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Or You can do This

$("#td_id").removeClass('Old_class').addClass('New_class');

edited Mar 27 '15 at 10:50

DanC

1,297
4
24
42

answered Jan 01 '13 at 10:59

Alireza Masali

668
1
10
19

score 7 · Answer 5 · answered Aug 10 '10 at 21:15

So you want to change it WHEN it's clicked...let me go through the whole process. Let's assume that your "External DOM Object" is an input, like a select:

Let's start with this HTML:

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

Some very basic CSS:

#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

And set up a jQuery event:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

Now, whenever you pick something from the select, it will automatically find a cell with the matching text, allowing you to subvert the whole id-based process. Of course, if you wanted to do it that way, you could easily modify the script to use IDs rather than values by saying

.filter("#"+useVal)

and make sure to add the ids appropriately. Hope this helps!

score 6 · Answer 6 · edited Apr 08 '21 at 06:03

6

You can check out addClass or toggleClass

edited Apr 08 '21 at 06:03

Syscall

19,327
10
37
52

answered Aug 10 '10 at 19:45

Karl Johan

4,012
1
25
36

user113716 · Answer 7 · 2010-08-10T20:04:14.320

5

EDIT:

If you're saying that you're changing it from a nested element, you don't need the ID at all. You can do this instead:

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

Original answer:

$('#td_id').removeClass('change_me').addClass('some_other_class');

Another option is:

$('#td_id').toggleClass('change_me some_other_class');

edited Aug 10 '10 at 20:04

answered Aug 10 '10 at 19:44

user113716

318,772
63
451
440

I don't think the OP's inside the ``, though he might be, re-read carefully :) – Nick Craver Aug 10 '10 at 20:05
@Nick - Yeah, I added the update because I read it again and saw that OP was asking *"How do I grab the td's id and change..."*. This led me to believe that OP doesn't have a handle on the ID, which would make my original answer not very helpful. Given this, I'm assuming the element with the handler is nested. But it certainly is an assumption. – user113716 Aug 10 '10 at 20:09

score 2 · Answer 8 · answered May 02 '15 at 05:52

2

In the event that you already have a class and need to alternate between classes as oppose to add a class, you can chain toggle events:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});

answered May 02 '15 at 05:52

lentyai

534
1
9
22

score 2 · Answer 9 · answered Jan 04 '18 at 12:53

2

$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});

answered Jan 04 '18 at 12:53

Prabhu

46
1
4

score 1 · Answer 10 · answered Jan 24 '18 at 03:47

1

this method works well for me

$('#td_id').attr('class','new class');

answered Jan 24 '18 at 03:47

Puterafx Fx

11
1

Make some details about it. – aircraft Jan 24 '18 at 07:59

score 1 · Answer 11 · answered Jul 05 '19 at 10:05

1

change class using jquery

try this

$('#selector_id').attr('class','new class');

you can also set any attribute using this query

$('#selector_id').attr('Attribute Name','Attribute Value');

answered Jul 05 '19 at 10:05

Love Kumar

1,056
9
10

score 1 · Answer 12 · answered Apr 08 '21 at 06:25

1

Here is the solution using jQuery:

$(document).ready(function(){
  if($('#td_id').hasClass('change_me')) {
    $('#td_id').removeClass('change_me').addClass('something_else');
  }
});

answered Apr 08 '21 at 06:25

Rashed Rahat

2,357
2
18
38

score -1 · Answer 13 · answered Aug 21 '18 at 16:00

I better use the .prop to change the className and it worked perfectly:

$(#td_id).prop('className','newClass');

for this line of code you just have to change the name of newClass, and of course the id of the element, in the next exemple : idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

By the way, when you want to search which style is applied to any element, you just click F12 on your browser when your page is shown, and then select in the tab of DOM Explorer, the element you want to see. In Styles you now can see what styles are applied to your element and from which class its reading.

jQuery change class name

13 Answers13

Linked

Related