title: Highlighting and Un-Highlight a table row on click from row to row
body: <p>I've been at this problem for awhile with no luck.</p>
  
  <p>Please note. No jquery =/</p>
  
  <p>The JS code I have is as following</p>
  
  <pre><code>function highlight(){
   var table = document.getElementById('dataTable');
   for (var i=0;i &lt; table.rows.length;i++){
    table.rows[i].onclick= function () {
     if(!this.hilite){
      this.origColor=this.style.backgroundColor;
      this.style.backgroundColor='#BCD4EC';
      this.hilite = true;
     }
     else{
      this.style.backgroundColor=this.origColor;
      this.hilite = false;
     }
      }
   }
  }
  </code></pre>
  
  <p>The HTML is as following</p>
  
  <pre><code>&lt;table id="dataTable"&gt;
    &lt;tr onclick="highlight()"&gt;&lt;td&gt;Data1&lt;/td&gt;&lt;td&gt;Data2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr onclick="highlight()"&gt;&lt;td&gt;Data1&lt;/td&gt;&lt;td&gt;Data2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr onclick="highlight()"&gt;&lt;td&gt;Data1&lt;/td&gt;&lt;td&gt;Data2&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Currently when I click it changes color, however when I click on the second row the first row still remains highlighted. Could you please assist me in accomplishing this task with no jquery? </p>
  
  <p>Thank you.</p>