Question

I’d like to make an entire table row clickable, including the whitespace. I’ve seen ways to do this with JavaScript and a click handler on TR, or just by making each TD as display:block.

The wrinkle is I also want to have some text in the row that links somewhere else, but doesn’t trigger the underlying link for the entire rest of the row. Essentially, this special text will be like a “badge”.

Something like this:

T = Text
B = Badge
W = Whitespace

A single cell in the row may look like this:

TTTTT BB WWWWWWWWWWWWWWWWWWW

Clicking T and W would go to one link, this is the usual case.
But clicking on B would open up a different link in a new window, and would NOT open the original link in the main window.

Looking for pointers in the right direction, whether this can be done in pure HTML/CSS, or JavaScript, etc. Thanks,

Answer 1

You can use A elements for navigation, then if the row gets a click from one, ignore it.

<tr onclick="doSomething(event);">
  <td>
    <a href="…">TTTTT</a><a href="…">BB</a>WWWWWWWWW…


function doSomething(evt) {
  var tgt = evt.target || evt.srcElement;
  if (tgt && tgt.tagName.toLowerCase() == 'a' && tgt.href) {
    // don't do click action
    return;
  } 
  // do click action
}

Oh, and don’t make TRs display: block since they are supposed to be display: table-cell.