jQuery change class name

M

13

386

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?

Madore answered 10/8, 2010 at 19:42 Comment(0)

C

786

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.

Cultivar answered 10/8, 2010 at 19:44 Comment(5)

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 – Praetor 10/8, 2010 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') :) – Cultivar 10/8, 2010 at 19:58

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... – Praetor 10/8, 2010 at 19:59

@Bob - Right...some other DOM object, you're assuming that object is inside the <td> in question :) – Cultivar 10/8, 2010 at 20:1

Note that the change_me part is optional if you use toggleClass() – Jacquelynnjacquenetta 16/12, 2016 at 14:11

F

103

I think you're looking for this:

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

Franklin answered 10/8, 2010 at 19:45 Comment(0)

D

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/

Dominick answered 11/6, 2012 at 15:52 Comment(1)

But he wanted to do it inside the click event of some other dom object – Flameproof 20/10, 2012 at 9:20

I

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');

Iover answered 1/1, 2013 at 10:59 Comment(0)

T

7

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!

Toth answered 10/8, 2010 at 21:15 Comment(0)

G

6

You can check out addClass or toggleClass

Grote answered 10/8, 2010 at 19:45 Comment(0)

W

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');

Widthwise answered 10/8, 2010 at 19:44 Comment(2)

I don't think the OP's inside the <td>, though he might be, re-read carefully :) – Cultivar 10/8, 2010 at 20:5

@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. – Widthwise 10/8, 2010 at 20:9

B

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');
});

Bothwell answered 2/5, 2015 at 5:52 Comment(0)

G

2

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

or

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

Grantham answered 4/1, 2018 at 12:53 Comment(0)

S

1

this method works well for me

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

Selfmastery answered 24/1, 2018 at 3:47 Comment(1)

Make some details about it. – Gaelic 24/1, 2018 at 7:59

O

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');

Overweight answered 5/7, 2019 at 10:5 Comment(0)

P

1

Here is the solution using jQuery:

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

Polinski answered 8/4, 2021 at 6:25 Comment(0)

S

-1

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.

Siding answered 21/8, 2018 at 16:0 Comment(0)

Recommended topics

Hot tags