Change Background of a table row when value changes

[Temnis]

Hey guys!

 

I have a stupid questions! I have a table with some rows. Every row has its unique id.

<table id="CONNECTION">    <tr id="id1">        <td>1</td>        <td>0</td>    </tr>    <tr id="id2">        <td>2</td>        <td>0</td>    </tr></table>

Now I want to write a function. Something like popGreen($rowID). That function should change the background color of a single row to green. After that, the background color should slowly fade away.

 

How do I do that? I'm pretty sure there is an easy way to do this with jQuery, but I don't know where to start.

 

Any Ideas?

[justsomeguy]

You can set it to green then animate back to the original color.https://www.google.com/search?client=opera&q=jquery+animate+background+color&sourceid=opera&ie=UTF-8&oe=UTF-8

[dsonesuk]

table with editable cells

            $(function() {                $('#CONNECTION td').each(function() {                    $(this).attr('contenteditable', 'true');                    $(this).attr('data-value', $(this).html());                });                $('#CONNECTION td').on('blur', function() {                    if ($(this).html() != $(this).attr('data-value'))                    {                        $(this).parent().css({'background-color': 'green'});                        $(this).parent().animate({'background-color': 'transparent'}, 900);                        $(this).find('br').remove();                        $(this).attr('data-value', $(this).html());                    }                });            });

Edited September 5, 2014 by dsonesuk

[Day]

Or if you want to keep your js and styles separate. After you get the value you can add a class such as 'greenRow' with a transition property and then remove the class. The transition will create the effect but only in browsers that support it.