Add css class to a td tag using javascript

Question

i'm trying to make a timetable for a Moodle in form of a Greasemonkey script.

The idea is to highlight the subject for the current hour, but i can't find a working way of doing it.

I'm injecting css into the page, and using jQuery to add the injected css class to the target td.

This is the css code injected into the page header:

.current_class {background-color:green};

And this is the javascript code used to add the class to the td:

var cell = $("#timetable_table").find("tr").eq(current+1).find("td").eq(date.getDay());

I know cell is the correct td because i can cell.text("foo") and the correct cell is modified, but when i do:

cell.addClass("current_class");

the table stays the same.

I don't have to do it that way, i only want to dynamically change the background on a td tag, so i don't mind using other methods.

Thanks.

Can you confirm that the class attribute of the element is changed? Your CSS should have the semicolon immediately after green. — Aaron Kurtzhals
– Aaron Kurtzhals, Commented May 14, 2013 at 18:46
Your code runs fine for me: jsfiddle.net/tC8vL You need to add more context like is there other classes added to the cells? — epascarello
– epascarello, Commented May 14, 2013 at 18:47

Niet the Dark Absol · Accepted Answer · 2013-05-14 19:04:26Z

7

First I would suggest you change to this:

var cell = document.getElementById('timetable_table').rows(current+1).cells(date.getDay());

And:

cell.className += (cell.className ? " " : "")+"current_class";

But that's just for performance reasons

The probable cause of the issue is that you have background-color being defined elsewhere with greater specificity. Try using this CSS selector:

#timetable_table tr>td.current_class{background-color:green};

That should be specific enough to win.

edited May 14, 2013 at 19:04

answered May 14, 2013 at 18:47

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gcq Over a year ago

Could be the problem, becouse as stated before, i'm modifying a page, so might be alredy defined. But i dont understand the selector: it selects td with the class alredy?

Niet the Dark Absol Over a year ago

CSS updates in realtime. So if you add a class to a cell in that table, it will match the selector and the new style will be applied.

gcq Over a year ago

so you are telling me to .addClass() and then to use the selector to add the background-color prop?

user10248738 · Accepted Answer · 2019-07-31 12:14:02Z

2

use className property for change or add class like example:

tbody.firstChild.lastChild.className='tr-parent1';

answered Jul 31, 2019 at 12:14

user10248738

Collectives™ on Stack Overflow

Add css class to a td tag using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related