CODEWITHSUNDEEP
phpjavascriptmysql
Andrew Fox
Andrew Fox

Reputation: 890

How to change the background color of <tr> to a color and then back to it's default color using JavaScript?

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!

Upvotes: 2

Views: 1672

Answers (5)

axel.michel
axel.michel

Reputation: 5764

I would combinate a CSS-Rule with the JS.

In CSS:

tr.activeRow {
  background: red !important;
}

This is the Javascript PART:

function attON(rowID) {
  // to be sure that there is always just on active row...
  var activeRows = document.getElementsByClassName('activeRow');
  for(a in activeRows) {
    activeRows[a].className = '';
  }
  // set classname to override the inline style
  document.getElementById(rowID).className="activeRow";
}

function attOFF(rowID) {
  // jus remove the classname
  document.getElementById(rowID).className="";
}

Upvotes: 0

Bhavik Shah
Bhavik Shah

Reputation: 2291

Do you mind adding a hidden field in each tr that stores color from database.
Moreover, i have sent only id on events to functions and appended "row" with id in javascript.

<tr id="row$i">
    <td>
        <input type="text" onfocus="attON('$i')" onblur="attOFF('$i')">
        <input type="hidden" value="color from database" name="$iHC" id="$iHC">
    </td>
</tr>

Javascript functions:

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

function attOFF(id){
    var row = document.getElementById("row"+id);

    //fetch the value from HTML element and assign it to a javascript variable
    //remember to append "#" to value of color if you have not stored in database
    var color = document.getElementById(id+"HC").value();
    row.style.backgroundColor = color;
}

Upvotes: 0

Asad Saeeduddin
Asad Saeeduddin

Reputation: 46628

Since you have different background highlight colors for each row, you should output these along with your markup as a data- attribute. Additionally, use this instead of adding functions with different i values:

<tr id="row$i">
    <td><input type="text" onfocus="attON(this);" onblur="attOFF(this);" data-color="$color"></td>
</tr>

Your functions would then be:

function attON(el) {
    el.parentElement.parentElement.style.backgroundColor = el.getAttribute('data-color');
}

function attOFF(el) {
    el.parentElement.parentElement.style.backgroundColor = "";
}

Here is a demonstration: http://jsfiddle.net/yCNft/

Upvotes: 1

gamehelp16
gamehelp16

Reputation: 1101

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')

Upvotes: 1

karaxuna
karaxuna

Reputation: 26930

function attON(id)
{
    var row = document.getElementById(id);
    if(!row.getAttribute('data-originalColor')){
        var originalColor = row.style.backgroundColor;
        row.setAttribute('data-originalColor', originalColor);
    }
    row.style.backgroundColor = "#FF0000";
}

function attOFF(id)
{
    var row = document.getElementById(id);
    var originalColor = row.getAttribute('data-originalColor');
    row.style.backgroundColor = originalColor;
}

Upvotes: 1

Related Questions