jquery : alternate row colour in table except cell with class to keep background colour

Question

Hi,

I am new to jquery. I have this in my code:

$("tbody tr:odd ").addClass("alt");

with css:

tbody tr.alt td {
   background-color: #e6EEEE;
}

I have a cell in table with

<td class="coloron">

Right now, the every other row command is over riding my class="coloron".

How can I maintain my cell unique colour while having every other row colouring?

Answer 1

Define the styles so that your unique color is defined later in the stylesheet, like this:

tbody tr.alt td {
  background-color: #e6EEEE;
}
tbody tr td.coloron {
  background-color: #FFFFFF;
}

If a row has multiple classes, given the same level of specificity in the style rule, the one defined last in the CSS wins. You can see it working here.

Answer 2

Your tbody tr.alt td is more specific than .coloron and will override it, instead do something like this:

tbody tr.alt td.coloron {
   // your CSS
}    

Or perhaps this:

tbody tr td.coloron {
   // your CSS
}

Answer 3

use css !important:

td.coloron {
    background: #ccc !important;
}

Answer 4

try adding this in your CSS:

.coloron, .coloron.alt { background:red }