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?
+5
A:
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.
Nick Craver
2010-08-10 19:44:31
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
2010-08-10 19:56:28
@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
2010-08-10 19:58:03
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
2010-08-10 19:59:21
@Bob - Right...some *other* DOM object, you're *assuming* that object is inside the `<td>` in question :)
Nick Craver
2010-08-10 20:01:06
yes...its very confusing the way the question is worded...
Bob Fincheimer
2010-08-10 20:01:42
+1
A:
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');
patrick dw
2010-08-10 19:44:48
I don't think the OP's inside the `<td>`, though he might be, re-read carefully :)
Nick Craver
2010-08-10 20:05:43
@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.
patrick dw
2010-08-10 20:09:04
+2
A:
I think you're looking for this:
$('#td_id').removeClass('change_me').addClass('new_class');
Fosco
2010-08-10 19:45:03
+1
A:
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!
Trafalmadorian
2010-08-10 21:15:29