external JS file + jquery + css

Question

I have a tr in my html like this

<link rel="stylesheet" type="text/css" href="some_file.css"> // at the head

<c:forEach var="some_variable" items="some_items">
      <tr class="some_class"> some_variable </tr>
</c:forEach>

I also have a submit button

<input type="submit" value="submit" onclick="onSave()"/>

The on click with the button will trigger a function in external javascript

$( '.some_class' ).each( function() {
    if( some condition which involve '.some_class' ) {
       $( this ).addClass('another_class');
    } else {
       $( this ).removeClass('another_class');
    } 
});

The another class is from an external css which have

.another_class {
    background-color: '#ffffb4';
}

I don't get it why the tr doesn't change the background-color when I added a class to the tr, what am I doing wrong?

can you use a browser dev tool to see whether or not the added style is applied? maybe the class is added, but it is not used? — R. Oosterholt
– R. Oosterholt, Commented Oct 11, 2013 at 6:35
I tried console.log( $(this).attr('class') ) and it's printing some_class another_class — newbie
– newbie, Commented Oct 11, 2013 at 6:53
so your class is added to the elements. Now you need to find out why the style is not applied. Probably to to with the style precedent... You could try to add !important to the class to check. — R. Oosterholt
– R. Oosterholt, Commented Oct 11, 2013 at 7:00

gregjer · Accepted Answer · 2013-10-11 06:48:44Z

1

First of all I would correct your input which has unclosed value attribute:

<input type="submit" value="submit onclick="onSave()"/>

change to

<input type="submit" value="submit" onclick="onSave()"/>

you are missing td element in your row

<tr class="some_class"> <td>some_variable</td> </tr>

Ahh and remove apostrophes from your style rule like below:

.another_class {
    background-color: #ffffb4;
}

And basic JSFiddle with your problem -> http://jsfiddle.net/ApfJz/24/

edited Oct 11, 2013 at 6:48

answered Oct 11, 2013 at 6:25

gregjer

2,8432 gold badges20 silver badges18 bronze badges

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

6 Comments

newbie Over a year ago

A yeah that my typing error here, sorry for that. See my update i fixed it. But still that won't fix my problem. Do you have any suggestion?

gregjer Over a year ago

Posting here your HTML snippet would help, then we can try to check what is wrong

newbie Over a year ago

The code is long so I only post the structure it self. The td is not really related to my problem i only want to change the color of the whole row on a specific condition. When i tried in jquery the .css( background-color: some color ) it work out well. But my tech lead saids the proper approach is to put the style on the external css file so actually i'm not that familiar with this.

gregjer Over a year ago

Now I know, remove apostrophes from your CSS background-color, see updated answer

newbie Over a year ago

I removed the quotes but still have no effect.

|

Collectives™ on Stack Overflow

external JS file + jquery + css

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest