Question

table#id_table_comments tr td {
    /*background: #fff;*/
    background: #f5f5f5;
    padding: 6px;
    text-align: left;
    vertical-align: top;
    border-bottom:1px solid #ddd;
}
table#id_table_comments tr:nth-child(2n) td {
    /*background: #f5f5f5;*/
    background: #fff;
}
.classTableRow{
    background-color: #9999CC;
    border: 1px solid gray; 
}



$(document).ready(function(){
    $("td").mouseover(function(){
        $(this).addClass('classTableRow');
    })

    $("td").mouseout(function(){
        $(this).removeClass('classTableRow');
    })
});

But the jQuery is not working for the nth row(even row) .

What should i do ?

Answer 1

table#id_table_comments tr:nth-child(2n) td is more specific than .classTableRow, so its background wins.
Add !important to the .classTableRow background to force it to override the other selector.

Also, you should use :hover instead of using jQuery to add a class.