title: How to add Focus to a table row <tr>?
body: <p>I have a table generated with <strong>AngularJS</strong>.<br>
  Here's my HTML:</p>
  
  <pre><code>&lt;table class="my_table"&gt;
      &lt;thead&gt;
           &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th&gt;Celphone&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="contact in contacts"&gt;
              &lt;td&gt;{{contact.Name}}&lt;/td&gt;
              &lt;td&gt;{{contact.Address}}&lt;/td&gt;
              &lt;td&gt;{{contact.Celphone}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want each row to change color when "hover" and a different color when "clicked", so I tried this with CSS:</p>
  
  <pre><code>&lt;style&gt;
  .my_table tbody tr:hover {
     background-color: #7fccee; /*--- this is a blue color when hover ---*/
  }
  .my_table tbody tr:focus {
     background-color: #f3f3f3; /*--- this is a gray color when clicked---*/
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>The hover works perfectly, but the <strong>Focus</strong> is not working! (The weird thing is that in the browser console, if I select the row and "<em>force element state :focus</em>" then it applies the focus to the row)</p>
  
  <p>I also tried using a SCRIPT with jquery:</p>
  
  <pre><code>$(document).ready(function() {
     $('.my_table tbody tr').click(function() {
        $(this).addClass('active'); //I'm adding the color gray with css to '.active'
     });
  });
  </code></pre>
  
  <p>But this won't work too, what am I doing wrong?</p>