Question

I have a <table> that is populated from a mysql database using php. The <tr style="background-color:;"> is stored in the database for each record. I have made a small Javascript so that when the user selects (onfocus) or deselects (onblur) the <input>, the <tr> will change colors. I have it set so the color will be red when selected, but I want it to return to it’s default color once deselected.

Here is a snippet of my code, located within a while() loop, where $i is incremented:

<tr id="row$i">
<td><input type="text" onfocus="attON('row$i')" onblur="attOFF('row$i')"></td>
</tr>    

Here are my functions:

function attON(id)
    {
    var row = document.getElementById(id);
    row.style.backgroundColor = "#FF0000";
    }

function attOFF(id)
    {
    var row = document.getElementById(id);
    row.style.backgroundColor = "";
    }

As I’m sure you will guess, the backgroundColor does not change back to it’s default value, it changes to the <table> color instead. I was thinking of maybe capturing the default color in function attON(id) and setting it to a global variable would be the answer, but I don’t know how to do that. Obviously any other ideas are welcome. Cheers!

Answer 1

Try to edit this:

    function attOFF(id)
    {
        var row = document.getElementById(id);
        row.style.backgroundColor = "";
    }

To this:

    function attOFF(id,realcolor)
    {
        var row = document.getElementById(id);
        row.style.backgroundColor = realcolor;
    }

Then change attOFF('row$i') to attOFF('row$i','put here the PHP code to show the real color of the tr tag')