CSS and jQuery - how to force 2 rules to work together

I have a html table. I need 2 rules to work:

  1. On mouse over table row should change background color.

  2. Cells in 1 column should be with different color depending on cell content, for example - if value in the cell="Green" , background should be green.

For the first rule I did rule in css:

tr:hover
{
    background: brown;
}

For the second - I've attached jQuery 2.0.3 and added js function which create class "color" for td:

$(document).ready(function(){

    $('td.color').each(function(){  
    var x = $(this).text().trim();
    if ( x === "Green" ) $(this).css({background: 'green'});
    else if (x === "Yellow") $(this).css({background: 'yellow'}) ;
    else if (x === "Red") $(this).css({background: 'red'}) ;
    });

 });

The html of table is:

<table>
    <tr  class='tr'>
        <td class='td'>Name1</td>
        <td class='td'>Green</td>
        <td class='color'>Green</td>
    </tr>
     <tr  class='tr'> 
         <td class='td'>Name2</td>
         <td class='td'>Yellow</td>
         <td class='color'>Yellow</td>
    </tr>
    <tr class='tr'>
        <td class='td'>Name3</td>
        <td class='td'>Red</td>
        <td class='color'>Red</td>
    </tr>
</table> 

(class color assigned only to last column)

The sample with result you can see here: http://jsfiddle.net/bM5aW/7/

So, backgrounds in last column are coloured depending on text value, and table rows change background color on mouse over event. But the last column doesn't change color on mouse over, as I understand because "td" rule from js script overrides "tr" rule from css. How to force "tr" rule to work if "td" rule was also declared?

Answers


Add a !important to the rule

tr:hover, tr:hover td {
    background: brown !important;
}

Demo: Fiddle

The problem is you are applying an inline style to the last td element, which has precedence over the tr element's style.


Another option is to use class selectors to apply the color

$(document).ready(function () {
    $('td.color').addClass(function(){
        return $.trim($(this).text()).toLowerCase()
    })
});

then

tr:hover, tr:hover td {
    background: brown;
}
td.green {
    background: green;
}
td.yellow {
    background: yellow;
}
td.red {
    background: red;
}

Demo: Fiddle


Change the jQuery so it adds classes instead:

$(document).ready(function(){
    $('td.color').each(function(){  
        var x = $(this).text().trim();
        if ( x === "Green" ) $(this).addClass("green");
        else if (x === "Yellow") $(this).addClass("yellow");
        else if (x === "Red") $(this).addClass("red");
    });   
 });

and add this to the CSS:

.green {
    background: green;
}

.yellow {
    background: yellow;
}

.red{
    background: red;
}


tr:hover td
{
    background: brown;
}

Need Your Help

What exceptions are thrown by JPA in ejb containers?

java jpa java-ee ejb-3.0

I am developing an EJB application to run on glassfish v3. If I look at the javadoc for the EntityManager class it says that methods like find, persist etc throw exceptions derived from

Outbound connection in Azure VM

java networking ubuntu azure

We can't connect to external resources from virtual machine (Ubuntu 13.10) in Azure. Connection break after timeout or connect a lot of time later.