Question

I am using tablesorter 2.0 and I have been trying to override the css theme when a button is clicked, but I can’t seem to get anything going. I tried to add a little css to the theme file, but I think another attribute is overriding it. What I want to do is change the background color of a row of a certain class.

If anyone can check this out and tell me where to add the class and the attribute to this file, it would be appreciated.

Here is the theme file for tablesorter:

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
    border-radius:3px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #5B5781;
}

Here is the jquery css I use to change the row (it’s a callback from a $.post() call):

function(){
            $("#row_"+id).css("background-color", "orange");
            }

Answer 1

There’s nothing wrong with TR having background-color.

Your code works but you have to realize that you specified that TD have a background-color of #FFF. You are changing the TR’s BG color, but TD’s color is on top of it.