CODEWITHSUNDEEP
jquerycss
java_dude
java_dude

Reputation: 4088

Table row set with background color cannot be changed dynamically using jQuery

In CSS, I have defined the odd row color in a table as #eee but it fails to update the even row when I try to update the background-color through jQuery. jQuery code only updates color for odd rows. 

.etable tr:nth-of-type(odd) {
    background: #eee;
}

jQuery call

$('#' + this.options.id).addClass("hover");

Any reason why the odd behavior? If need an example please let me know.

Upvotes: 1

Views: 1911

Answers (2)

monkeyhouse
monkeyhouse

Reputation: 2896

edit #3 updated (7/31/2013) ; see http://jsfiddle.net/mEVK3/17/

changes... I added the javascript

    $('#table tr').click(function(){
        $(this).toggleClass('highlight');
    });

along with a css class called highlight

.etable tr.highlight {
   background-color: orange;
}

the hover seletor (:hover) was also now acts on a td element. it now uses a transparent background to allows a row to look both highlighted and selected.

.etable tr td:hover {
   background-color: rgba(30,100,30,0.4);
   cursor:pointer;
}

edit #2 (7/30/2013 is this what you're going for? http://jsfiddle.net/mEVK3/12/

I rearranged the order of the css to make the css priority work properly. if this is not what you're trying to do, I will need specifications as to how the end result should look.

edit #1: I have a really strange answer for you, it has to do with css priority and the order in which the code is added to the css!!!! in the my previous answer, the inline style is being over-ridden by the css style for the even rows!

I think this is what you want. http://jsfiddle.net/mEVK3/5/

I think this is what you dont want http://jsfiddle.net/mEVK3/4/

I used the script

 $('#table.etable tr').addClass("bluebackground");

where bluebackground is a simple class

the rest of the code is below:

HTML

<table class="etable" id="table">
<tr><td>Some text</td></tr>  
    <tr><td>Some text 0</td></tr>  
    <tr><td>Some text 1</td></tr>  
    <tr><td>Some text 2</td></tr>  
    <tr><td>Some text 3</td></tr>  
    <tr><td>Some text 4</td></tr>  
    <tr><td>Some text 5</td></tr>  
    <tr><td>Some text 6</td></tr>  
    <tr><td>Some text 7</td></tr>  
    <tr><td>Some text 8</td></tr>  
    <tr><td>Some text 9</td></tr>  
</table>

CSS

.etable tr:nth-child(odd) {
 background: lightgrey;
}

.etable tr.bluebackground{
  background-color: lightblue;
}

.etable tr:hover {
  background: #f00;
} 

.etable tr.highlight{
   background-color: yellow;
}

Javascript

$('#table tr:eq(3)').addClass("highlight");

//change the background color in javascript
$('#table.etable tr').addClass("bluebackground");

comment out the last line in the script to remove the background from all the rows.

what blows my mind is that the order of the css matters. alot

it has to be

  1. nth child color (even/odd)

  2. custom background (this will be added later in the script)

  3. hover, cause this goes on top of the custom background

  4. highlight (cause this goes over the rest)

the css order matters because in the script I wrote they all have equal presidence. I guess, instead you could add extra specificity to the hover and highlight so they're always on top. then the css would look like....

#table.etable tr:hover {
  background: #f00;
} 

table#table.etable tr.highlight{
   background-color: yellow;
}

that would give the highlight highest priority of them all, athen hover then next highest...

read http://designshack.net/articles/css/what-the-heck-is-css-specificity/ for more answer on css specificity and priority and how it decides which styles to apply (look about half way down the page)

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24703

Here is a working fiddle http://jsfiddle.net/kevinPHPkevin/mEVK3/ ensure you have an ID set to the <table> element

Upvotes: 0

Related Questions