title: How to change the background color of <tr> to a color and then back to it's default color using JavaScript?
body: <p>I have a <code>&lt;table&gt;</code> that is populated from a <code>mysql</code> database using <code>php</code>. The <code>&lt;tr style="background-color:;"&gt;</code> is stored in the database for each record. I have made a small <code>Javascript</code> so that when the user selects (<code>onfocus</code>) or deselects (<code>onblur</code>) the <code>&lt;input&gt;</code>, the <code>&lt;tr&gt;</code> 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.</p>
  
  <p>Here is a snippet of my code, located within a <code>while()</code> loop, where <code>$i</code> is incremented:</p>
  
  <pre><code>&lt;tr id="row$i"&gt;
  &lt;td&gt;&lt;input type="text" onfocus="attON('row$i')" onblur="attOFF('row$i')"&gt;&lt;/td&gt;
  &lt;/tr&gt;    
  </code></pre>
  
  <p>Here are my functions:</p>
  
  <pre><code>function attON(id)
      {
      var row = document.getElementById(id);
      row.style.backgroundColor = "#FF0000";
      }
  
  function attOFF(id)
      {
      var row = document.getElementById(id);
      row.style.backgroundColor = "";
      }
  </code></pre>
  
  <p>As I'm sure you will guess, the <code>backgroundColor</code> does not change back to it's default value, it changes to the <code>&lt;table&gt;</code> color instead. I was thinking of maybe capturing the default color in <code>function attON(id)</code> 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! </p>