Question

I basically have this markup coming from my JSP. I add class in each row and I want have a blinking effect on each row.

<table>
 <tbody>
  <tr class="blinkYellow">
   <td>Col 1</td>
   <td>Col 2</td>
   <td>Col 3</td>
  </tr>
  <tr>
   <td>Col 1</td>
   <td>Col 2</td>
   <td>Col 3</td>
  </tr>
  <tr class="blinkYellow">
   <td>Col 1</td>
   <td>Col 2</td>
   <td>Col 3</td>
  </tr>
 </tbody>
</table>

I setup a Jquery function and a timer like below. But I am currently unsure why the background-color of the table did not change.

$(document).ready(function(){
 setInterval(findYellow,1000);    
 function findYellow(){
  $("tr.blinkYellow").each(function(){
   if($(this).attr("background-color") == "yellow"){
    $(this).attr("background-color", "white")
   }else{
    $(this).attr("background-color", "yellow")
   }
  })
 }
});

I check out the Firebug HTML Tab and I notice that the background-color is really being changed on the selected element row.

But I am not sure why the background color of the row is not toggling its color from yellow and white.

Answer 1

Wouldn’t it be better to use css classes to add the color. If you do so, you can use jquery as follows:

$(this).toggleClass("blink-yellow");

EDIT:

You can use this page for trying out such things… http://jsfiddle.net/rgkQK/3/

$(document).ready(function(){ 
 setInterval(findYellow,1000);     
 function findYellow(){ 
  $("tr.blinkYellow").each(function(){ 
       $(this).toggleClass("background-color-yellow");
     })
    }
}); 

In fiddle it looks like it would work quite well 😉