title: Highlight table row when selected
body: <p>I'm trying to make it so that when a row is clicked, it gets highlighted (to make it clear that it is the currently selected row). And when another row is clicked, the previously selected row becomes un-highlighted and the new one becomes highlighted. </p>
  
  <p>As of now, what happens is that when I hover over a row, it gets highlighted (which works as planned), but when I click the background-color of the rows do not change. Some of my code is below, thanks in advance.</p>
  
  <p>Here is some example <strong>HTML</strong>:</p>
  
  <pre><code>    &lt;tr class="text_data selected_grey" onclick="getReportDetails(this, 'johndoe@gmail.com');"&gt;
          &lt;td class="text"&gt;John&lt;/td&gt; 
          &lt;td class="text"&gt; Doe&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="text_data selected_grey" onclick="getReportDetails(this, 'sarah@gmail.com);"&gt;
          &lt;td class="text"&gt;Sarah&lt;/td&gt; 
          &lt;td class="text"&gt;Dean&lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p>This is the relevant part of my <strong>Javascript</strong> getReportDetails function.</p>
  
  <pre><code>function getReportDetails(elem, email) {
  
  
  var j_elem = $(elem);
  
  $(".text_data").each(function() {
      if ($(this).is(j_elem)) {
          j_elem.addClass("selected_grey");
      } else {
          $(this).removeClass("selected_grey");
      }
  });
  </code></pre>
  
  <p>And this is the involved <strong>CSS</strong>.</p>
  
  <pre><code>.text_data {
      font-family: Verdana;
      font-size: 12px;
      font-weight: none;
  }
  .text_data:hover{
      cursor: pointer;
      background-color: #E0E0E0;
  }
  .selected_grey {
      background-color: #E0E0E0;
  }
  </code></pre>
  
  <p>EDIT: It turned out to just be a cache problem.</p>