How to add Focus to a table row ?

Question

I have a table generated with AngularJS.
Here's my 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>

I want each row to change color when "hover" and a different color when "clicked", so I tried this with 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>

The hover works perfectly, but the Focus is not working! (The weird thing is that in the browser console, if I select the row and "force element state :focus" then it applies the focus to the row)

I also tried using a SCRIPT with jquery:

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

But this won't work too, what am I doing wrong?

Possible duplicate of [Angular.js: Set CSS when Input is on Focus](https://stackoverflow.com/questions/19277099/angular-js-set-css-when-input-is-on-focus) — Aleksey Solovey, May 23 '18 at 15:26
https://stackoverflow.com/questions/10160445/change-color-of-tr-when-element-inside-is-in-focus and this may help I hope :) — UnpassableWizard, May 23 '18 at 15:27
@AlekseySolovey that duplicate is not relevant, since this is not dealing with input elements — Sterling Archer, May 23 '18 at 15:27

score 24 · Accepted Answer · answered May 23 '18 at 15:33

The :focus pseudo class only works with form elements such as <input>, <button> etc. You can add it to a non-form element like <tr> by adding tabindex, e.g.:

<tr tabindex="0">

Then apply the CSS as normal.

.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>

I didn't know that ..thanks a lot, this worked just fine! – Soul Eater May 23 '18 at 15:46 — Soul Eater, May 23 '18 at 15:46
Wow. That's not intuitive!! Thanks. – Debbie A Jul 11 '23 at 13:07 — Debbie A, Jul 11 '23 at 13:07

score -1 · Answer 2 · answered May 23 '18 at 15:34

I would use the directive:

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

How to add Focus to a table row ?

2 Answers2

Linked