Change Table Row Color back to white if it has already been clicked
<p>How can the code below be modified to add functionality on top of the existing code such that if the same table row that has already been clicked on (black), and is subsequently clicked on again, that it be changed from black to white?</p>

<p>Jay</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
tr.normal td {
    color: black;
    background-color: white;
}
tr.highlighted td {
    color: white;
    background-color: black;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="results" class="scrollingdatagrid"&gt;
  &lt;table id="mstrTable" cellspacing="0" border="1"&gt;
     &lt;thead&gt;
      &lt;tr&gt; 
        &lt;th&gt;File Number&lt;/th&gt;
        &lt;th&gt;Date1&lt;/th&gt;
        &lt;th&gt;Date2&lt;/th&gt;
        &lt;th&gt;Status&lt;/th&gt;
        &lt;th&gt;Num.&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt; 
        &lt;td&gt;KABC&lt;/td&gt;
        &lt;td&gt;09/12/2002&lt;/td&gt;
        &lt;td&gt;09/12/2002&lt;/td&gt;
        &lt;td&gt;Submitted&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;

      &lt;/tr&gt;
      &lt;tr&gt; 
        &lt;td&gt;KCBS&lt;/td&gt;
        &lt;td&gt;09/11/2002&lt;/td&gt;
        &lt;td&gt;09/11/2002&lt;/td&gt;
        &lt;td&gt;Lockdown&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr&gt; 
        &lt;td&gt;WFLA&lt;/td&gt;
        &lt;td&gt;09/11/2002&lt;/td&gt;
        &lt;td&gt;09/11/2002&lt;/td&gt;
        &lt;td&gt;Submitted&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt; 
        &lt;td&gt;WTSP&lt;/td&gt;
        &lt;td&gt;09/15/2002&lt;/td&gt;
        &lt;td&gt;09/15/2002&lt;/td&gt;
        &lt;td&gt;In-Progress&lt;/td&gt;
        &lt;td&gt;10&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
(
  function( )
  {
      var trows = document.getElementById("mstrTable").rows;

      for ( var t = 1; t &lt; trows.length; ++t )
      {
          trow = trows[t];
          trow.className = "normal";
          trow.onclick = highlightRow;
      }

      function highlightRow( )
      {
          for ( var t = 1; t &lt; trows.length; ++t )
          {
              trow = trows[t];
              trow.className = ( trow == this ) ? "highlighted" : "normal";
          }
      }
  }
)();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
