Make table row clickable link, but let links in TD still work

Question

The first requirement is to make a table row behave like a clickable link.

Various good sources pointed out you had to use javascript to achieve this, I chose this one Make table row clickable

Which uses jQuery and the link-data attribute in the TR tag.

However, I was hoping to make any < a > tag links within the TD cells to work normally as well. The desired result being if you click on a link in the table it works normally, but if you click anywhere else on the TR it goes to link-datas url.

This is what I currently have, but any click anywhere on the row, link or not goes to the data-link address.

$("tr[data-link]").click(function() {
  window.location = this.dataset.link;
});

<tr class="clickable-row" data-link="/invoices/10">
  <td>6</td>
  <td>2014-06-09</td>
  <td></td>
  <td>&pound;343,242.00</td>
  <td>&pound;68,640.00</td>
  <td><a href="/jobs/770">0453</a></td>
</tr>

I was thinking some sort of check in the jQuery/Javascript

it works as you expected on my side (tested on Opera) http://jsfiddle.net/Lb44p/ , clicking on the row lets you visit the fiddle.net while clicking on the link lets you visit bing.com — King King, Jun 09 '14 at 16:33
Ok, your right. Your implementation works in Chrome too, must be something more specific in what I've done. I have used coffeescript for this one so the code I pasted was tidyed, might drop coffeescript and see what it does — Jetblackstar, Jun 11 '14 at 12:02
Can't seem to get it to work on it's own KingKing, I'm guessing it's a bit of a undefined race condition for different Javascript engines, Amina's answer worked consistently so I've awarded that the correct answer. Thanks for trying this out for me though! — Jetblackstar, Jun 11 '14 at 12:16
To answer the above, I've since discovered it's a very specific issue with I.E and how it passes the event object in. I.E. is the only one that does this differently. Of course. — Jetblackstar, Sep 16 '14 at 12:14

Aminadav Glickshtein · Accepted Answer · 2014-06-11T12:27:56.733

1

You Should do this:

 $("tr[data-link]").click(function(e) {
   if(e.toElement.tagName=='A') return
   window.location = this.dataset.link;
});

If the user clicks on A element, the function will not execute (return).

edited Jun 11 '14 at 12:27

answered Jun 09 '14 at 16:32

Aminadav Glickshtein

23,232
12
77
117

A slight correction to your Code Amina, should read $("tr[data-link]").click(function(e) { to bring in the event object, but otherwise exactly what I was after. Thank you! – Jetblackstar Jun 11 '14 at 12:15
1

Edoted. Now you can +1 the answer :) – Aminadav Glickshtein Jun 11 '14 at 12:28

score 0 · Answer 2 · answered Sep 16 '14 at 12:20

Amina's answer still stands as correct. But since using it I've found a subsequent bug I thought I'd point out.

IE gives a different object to (e) from other browsers. So to make IE work with this technique you will need to add the following three lines to your JavaScript to prefilter the event object.

$("tr[data-link]").click(function(e) {
  // Catch where i.e. doesnt give us the clicked object.
  var elem, evt = e ? e:event;
  if (evt.srcElement)  elem = evt.srcElement;
  else if (evt.target) elem = evt.target;
  // If Anchor, or form input, return and do normal stuff  
  if(elem.tagName=='A' || elem.tagName=='INPUT') return;
  window.location = this.dataset.link;
});

Also note the extra tagName=='INPUT' is my own future addition so clicking any input field in the will also be ignored.

Make table row clickable link, but let links in TD still work

2 Answers2