Link focus on table click

Question

I have a table where the first cell on every row contains a link. When the user mouseclicks on a row I want the link on the same row to get focus().

I want to do this with an Angular directive. I'm using Angular but I think the solution comes down to jQuery usage.

This is a simplified version of what I've got now:

<div ng-app="app">

    <table border="1" focus-on-link-please>
      <tr>
        <td><a href>Link A</a></td>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
      <tr>
        <td><a href>Link B</a></td>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>

</div>

JS:

var app = angular.module('app', [])

app.directive('focusOnLinkPlease', function() {
  return function(scope, elem, attrs) {

    elem.bind('click', function(event) {
      console.log('click!')
      event.target.closest('tr').find('a').focus(); // Does not work :(
    });

  }
});

Fiddle demo

Any tips?

Answer 1

Write directive to take focus. like here How to set focus on input field? Use binding to connect things:

   <table>
      <tr ng-click="focusA = true">
        <td><a href focus-me="focusA">Link A</a></td>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
      <tr ng-click="focusB = true">
        <td><a href focus-me="focusB">Link B</a></td>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
   </table>

Answer 2

I modifed my jQuery to make it work.

elem.bind('click', function(event) {
  console.log('click!')
  var tr = $(event.target).closest('tr') || $(event.target);
  if (tr) {
    tr.find('a').focus();
  }      
});

Fiddle with solution.