addClass / removeClass不适用

Question

I tried to apply the addClass and removeClass for one of the rows in my table and for some reason the addClass and removeClass styles are not applied. Since they were not working I tried to use css but this one is making my code more redundant applying the same style to some of the fields. Any help would be appreciated. Thanks

From firebug

<tr style="color: red; font-weight: bold; background: none repeat scroll 0% 0% rgb(255, 255, 255); cursor: pointer;" class="state-selected"><td style="padding:2.5px 0px 2.5px 2px;">Equipment</td></tr>



.state-selected {
    }

and I have defined the style on the top of my jsp page

<style type="text/css">
.state-selected {
    color: 'red';
    font-weight: 'bold';
}
 </style>    
$("#index tr:gt(0)").hover(

    function () {
        $(this).css({
            'background': '#e9e7e7',
            'cursor': 'pointer'
        });
    }, function () {
        $(this).css({
            'background': '#ffffff',
            'cursor': 'pointer'
        });
    }).click(function (e) {
        $("#index tr").removeClass('state-selected');
        $(this).addClass('state-selected');

    });

Answer 1

Using the css() call, you are creating inline styles. These always override those defined in stylesheets (except when !important is used, but that's best avoided).

The point is, if you use css() then class names won't apply if they define the same properties. First remove the CSS styles you added ( {'color':'', 'font-weight':''} ) and then the class name should fall into place.