tableの行全体(tr)をリンクにする(jQuery)

trタグ全体や、tdタグの塊をaタグで囲っても、行全体をリンクにすることはできないようです。
jqueryを使って実装したので、サンプルを記録しておきます。

<table>
  <tr data-href="/hoge/">
    <td>foo</td>  
    <td>bar</td>
    <td>baz</td>          
  </tr>
</table>

<script>
  $('tr[data-href]').click(function (e) {
      if (!$(e.target).is('a')) {
        window.location = $(e.target).data('href');
      };
  });
</script>

<style>
  tr:hover {
    background: gray;
  }
</style>

See the Pen JjXNJVg by d0ne1s (@d0ne1s) on CodePen.