The easiest way to add links in your table rows, cells or elements that are not anchors!

Yeah man... Html can't do that for you out of the box. And it's sad. Very sad.

Don't worry bro here is the solution:

With npm:

npm install --save table-link

With bower:

bower install --save table-link

Or you can just download a ZIP.

var TableLink = require('table-link');

<script src="table-link.min.js"></script>

[data-href] {
  cursor: pointer;
}

table [data-href]:hover,
table [data-href]:hover > * {
  background-color: #AAB7D1; // Put whatever color you want... Or none.
}

In your table:

<tr data-href="http://google.com">
    <td>Some random crazy data.</td>
</tr>

In your Javascript file:

TableLink.init();
// Soooooo simple...

You can make use of blank and self (default) for targeting the link:

<tr data-href="http://google.com" data-target="self">
    <td>Some random crazy data.</td>
</tr>

<tr data-href="http://google.com" data-target="blank">
    <td>Some random crazy data.</td>
</tr>

TableLink.init('h1, div, span');

<h1 data-href="http://google.com"></h1>

<div data-href="http://google.com"></div>

<span data-href="http://google.com"></span>

The "element" argument is the delegate target, which can be td, tr, th or any element that matches the selector, if it was passed. The "target" argument is the real event target. The sencond can be used to see if the clicked element is the delegated element or some other element inside the delegated element.

TableLink.before(function(element, target) {
    return confirm('Can i open this link?');
});

TableLink.before(function(element, target) {
  // Cancel the action if the clicked element (maybe a cell inside a row[data-href])
  // has the ```.no-link``` class.
  return !target.classList.contains('no-link');
});

TableLink.after(function(element, target) {
    console.log('The link was opened!');
});

This repository is under the MIT License