Toggling(or Flashing) A Particular Cell In A Table For Some Time Frame

I have created a table in Html and I would like to make a particular cell to be flashing(on and off ) sort of.Can you please let me know if it is possible using javascript.

Solution 1:

You can create a javascript function that changes the background color of the desired cell. Further you can use setInterval() function to call the function after a fixed amount of time.

var flag = true;
functionchangeColor () {
    if(flag==true){
        document.getElementById("yourId").style.background="yourColor 1";
        flag=false;
    }
    elseif (flag==false){
    document.getElementById("yourId").style.background="yourcolor 2";
    flag = true;
    }
}
setInterval("changeColor()", timeinmillisec);

Solution 2:

You could use setTimeout for deferring execution of some code for a certain number of milliseconds. To get a flashing behavior, you could set the style to whatever it currently isn't (I'm setting classes in my example, but you're free to implement it any other way of course), and set a new timeout for the next alteration.

My example.

var elapsed = 0;
var interval = 250;
var duration = 3000;

functiontoggle(element) {
    var newClass = element.className == 'highlight' ? '' : 'highlight';
    element.className = newClass;
    elapsed += interval;

    if(elapsed < duration)
        setTimeout(function() { toggle(element); }, interval);
}

var element = document.getElementById('cell');
toggle(element);​

Here, I'm using the variables duration to set the desired duration of the entire flashing animation, elapsed to keep track of how long the flashing has been going on (threshold to be compared to duration), and interval to set the distance between each flash / toggle.

The toggle function sets the class name to highlight or nothing at all, depending on whatever it currently isn't, to get an alternating behavior. Given that the duration has not been exceeded, toggle is set to fire again after interval milliseconds.

Note that I'm using getElementById to identify the cell of interest. If this is not appropriate for you, you could use getElementsByTagName. For instance table.getElementsByTagName('tr')[0].getElementsByTagName('td')[2] will get the third column of the first row in a table.

Solution 3:

If you assign it an id you can use setTimeout() to change it's background after some time like so:

functionchangeColour() {
    document.getElementById("myId").style.backgroundColor="yellow";
}
setTimeout("changeColour()", 2000); // Turn it yellow in 2 seconds

I think you get the general idea, you can improve the code above to make it blink.

Share