Even/Odd table row styles with jQuery

Question

Here is an HTML/jquery code from w3s website. If you try it at: Try It W3S You will see the problem. odd rows have different opacity than even rows, this is ok, but I want the text color(or brightness) to remain the same. How to do it? I have tried it by setting: $("tr td").css("opacity","1.0"); but it didn't help.

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){

 $("tr").css("background-color", "yellow").css("opacity","1.0");

 $("tr:odd").css("opacity","0.5");
 $("tr td").css("opacity","1.0");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
  <th>Company</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkцp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

</body>
</html>

Seems to work fine: http://jsfiddle.net/j08691/uYSJ8/. The text color is the same but since you change the opacity it looks lighter. — j08691, Jun 13 '13 at 15:53
@j08691 The thing is that I don't want the text to be lighter. I want keep it the same as in the even rows — maximus, Jun 13 '13 at 15:56

score 3 · Accepted Answer · edited May 23 '17 at 12:05

Actually, the text-color stays the same. However, opacity always affects the whole element (backgrounds,borders,text-colors) and all it's descendants. If you want to have transparent background only, you have to use hsla or rgba colors for the background which introduce a "transparency" channel which only affects the background of that single element:

// all you need is:
$(document).ready(function(){
    $("tr:even").css("background-color","rgb(255,255,0)");
    // rgba equivalent for yellow with 50% opacity
    $("tr:odd").css("background-color","rgba(255,255,0,0.5)");
});

Your modified Example

EDIT: alternatively this question about converting RGB to RGBA is very interesting and touches the topic about opacity altering the visual representation of a color.

However you don't need javascript at all to achieve that effect, a simple css declaration will do.

score 3 · Answer 2 · answered Jun 13 '13 at 16:01

3

You can do this quite simply with CSS3:

tr:nth-child(odd) {background-color: rgba(255, 255, 0, 0.5);}

answered Jun 13 '13 at 16:01

designcise

4,204
1
17
13

score 0 · Answer 3 · answered Mar 17 '14 at 04:11

0

This may help,

    <script>
    $( "tr:even" ).css( "background-color", "#A9D6F5" );
    $( "tr:odd" ).css( "background-color", "#ACE6CB" )
    </script>

answered Mar 17 '14 at 04:11

vardhan

1,377
11
14

Even/Odd table row styles with jQuery

3 Answers3