Как добавить Фокус в строку таблицы <tr>?

Question

У меня есть таблица, сгенерированная с помощью AngularJS .
Вот мой HTML-код:

<table class="my_table">
    <thead>
         <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Celphone</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in contacts">
            <td>{{contact.Name}}</td>
            <td>{{contact.Address}}</td>
            <td>{{contact.Celphone}}</td>
        </tr>
    </tbody>
</table>

Я хочу, чтобы каждая строка меняла цвет при «наведении» и другой цвет при «нажал ", поэтому я попробовал это с помощью CSS:

<style>
.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---*/
}
</style>

Наведение работает идеально, но Focus не работает!(Странно то, что в консоли браузера, если я выбираю строку и « состояние элемента силы: focus », тогда он применяет фокус к строке)

Я также попытался использоватьСЦЕНАРИЙ с jquery:

$(document).ready(function() {
   $('.my_table tbody tr').click(function() {
      $(this).addClass('active'); //I'm adding the color gray with css to '.active'
   });
});

Но это тоже не сработает, что я делаю не так?

Answer 1

Я бы использовал директиву:

app.directive('ngFocusClass', function () {
  return ({
        restrict: 'A',
        link: function(scope, element) {
            element.focus(function () {
                element.addClass('focus');
            });
            element.blur(function () {
                element.removeClass('focus');
            });
        }
    });
});

Answer 2

Псевдокласс :focus работает только с такими элементами формы, как <input>, <button> и т. Д. Вы можете добавить его к элементу, не являющемуся формой, например <tr>, добавив tabindex, например:

<tr tabindex="0">

Затем примените CSS как обычно.

.my_table tbody tr:hover {
  background-color: blue;
}

.my_table tbody tr:focus {
  background-color: red;
  outline: 0; /*remove outline*/
}

<table class="my_table" border>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Celphone</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="contact in contacts" tabindex="0">
      <td>{{contact.Name}}</td>
      <td>{{contact.Address}}</td>
      <td>{{contact.Celphone}}</td>
    </tr>
  </tbody>
</table>