jQuery help: How can i select tr td nth row?

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.

Answer 2

If I understand properly, you want to select a specific TD on a specific TR in your table.

If that's the case, collect the row index and add one to it (if you don't want to count the header). Then selecting specific cells is easy.

var row = $(this).closest('tr').index() + 1; 
thisRow = "table tr:nth-child(" + row + ")";
thisCell = thisRow + " td:nth-child(N)";